モジュール
scriptモードmoduleモード：import/export文が使える。
参考：
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 | 技術探し
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
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
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
参考：
How to export CommonJS and ES Module – Shuhei Kagawa
ES6 modules の export と CommonJS module の exports それぞれの使い分けってあるのかな – GitHub Gist
export default
参考：
JavaScript の export default アンチパターンについて、検証してみた – Qiita
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