モジュール [JavaScript]

モジュール

• script モード
• module モード：import / export 文が使える。

参考：

JavaScript モジュールの現状 | POSTD

ECMAScript (ES2015, Babel) におけるモジュールについて | 30歳からのプログラミング

意訳 初学者のための JavaScript モジュール講座 Part1 – Qiita

JavaScript におけるモジュールと import / export の使い方 | ANALOGIC アナロジック

ECMA-262 6th (ES 2015) のモジュールについて 入門編 | ひだまりソケットは壊れない

JavaScript のモジュール管理 (CommonJS とか AMD とか Browserify とか webpack) | tsuchikazu blog

JavaScript Module Pattern | Tarun Sharma

ES Modules (ESM)

参考：

ブラウザで覚える ES Modules 入門 | ICS MEDIA

7 Different Ways to Use ES Modules Today! | Hacker Noon

ES Modules · uupaa/JavaScript Wiki – GitHub

Node.js におけるモジュール

参考：

Node v9 でフラグ付きで ES Modules の import / export 構文を使用する – Qiita

Node.js と ECMAScript Modules | 技術探し

モジュール定義について学ぶ | YoheiM .NET

exports と module.exports で関数を公開する | KeruuWeb

ECMAScript Modules | Node.js v8.x Documentation [Official]

Modules | Node.js v8.x Documentation [Official]

ECMAScript Modules | Node.js (latest) Documentation [Official]

Modules | Node.js (latest) Documentation [Official]

esm

参考：

standard-things/esm: Tomorrow’s ECMAScript modules today! – GitHub

esm – npm

Tomorrow’s ES Modules Today! | Web Dev @ Microsoft

Webpack におけるモジュールの扱い

• 関数でラップされる
• strict モード
• this は exports を指す (CJS の動作をシミュレート)

参考：

Webpack 4.1 and ES Modules (ESM) | Zach Wegrzyniak

The state of JavaScript modules | webpack

ブラウザにおける ESM

参考：

ブラウザで覚える ES Modules 入門 | ICS MEDIA

CommonJS

参考：

How the module system, CommonJS & require works | RisingStack

Authoring CommonJS modules | know cujoJS

CommonJS modules instead of globals | Skypanther Studios

import / export

参考：

ECMAScript 6 modules: the final syntax | 2ality

import / export に対応する CommonJS の書き方

モジュールの import / require

// ES6
import Foo from 'foo'

// CommonJS
var Foo = require('foo')
// default で export されている場合
var Foo = require('foo').default

プロパティ、メソッドの import / require

// ES6
import { bar } from 'baz'

// CommonJS
var bar = require('baz').bar

メソッド単体の export

// ES6
export { method }

// CommonJS
exports.method = method

default として export

// ES6
export default function () {
  // ...
}

// CommonJS
module.exports = function () {
  // ...
}
// もしくは
exports.default = function () {
  // ...
}

参考：

CommonJS と ES6の import / export で迷うなら – Qiita

import と require どちらを使おう…。 | もっく日記

require と import の違い – matablo

import

参考：

IE でも js ファイル内で js ファイルを呼び出す (import する) – teratail

グローバル変数を使う

参考：

CommonJS modules instead of globals | Skypanther Studios

How to protect your global scope and still share variables | Axway Developer Blog

Shimming | Webpack [Official]

Using globals for CommonJS config files – Stack Overflow

global

参考：

CommonJS recommendation + `global` variable · Issue #4728 · eslint/eslint – GitHub

webpack 1.x

参考：

コード分割 | Webpack 1.13.0 日本語リファレンス (js STUDIO)

export

参考：

ES6 の export について – Qiita

How to export CommonJS and ES Module – Shuhei Kagawa

ES6 modules の export と CommonJS module の exports それぞれの使い分けってあるのかな – GitHub Gist

export default

参考：

JavaScript の export default アンチパターンについて、検証してみた – Qiita

Why we have banned default exports in Javascript and you should do the same | Krzysztof Kaczor – Neufund

module.exports vs. export default in Node.js and ES6 – Stack Overflow

babel-plugin-add-module-exports

参考：

require(‘./module’).default について | ゆずめも

UMD

参考：

ES6 (ES2015) Modules の UMD 化。HTML の Script 要素と ES6 import での同時読み込みに対応させる方法 | maesblog

.mjs 拡張子

参考：

.mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io

Module specifiers: what’s new with ES modules? | 2ality

.js 拡張子

参考：

Web compatibility and ESM in .js files · Issue #149 · nodejs/modules – GitHub

.esm.js / .es.js ファイル

参考：

Vue コンポーネントを npm パッケージ化する | Vue.js [公式]

what are .esm.js files and whats with the format: ‘es’ in rollup.js? – Stack Overflow