JavaScriptのimport/exportについて、CommonJS ModulesとES Modulesの違いとWebPack, Parcelの紹介

1. JavaScriptの
import/export
2018-03-17 木村 憲規

2. アジェンダ
JavaScriptのimport/export
ES Modulesの実装状況
webpack4がリリース
Parcelの紹介
2

3. アジェンダ
JavaScriptのimport/export
ES Modulesの実装状況
webpack4がリリース
Parcelの紹介
3

4. JavaScriptのimport/export
4
CommonJS Modules ES Modules
export側
(xxx.js)
module.exports = xxx; export default xxx;
import側
(index.js)
const xxx = require("./xxx"); import xxx from "./xxx";

5. JavaScriptのimport/export
5
CommonJS Modules ES Modules
export側
(xxx.js)
module.exports = xxx; export default xxx;
import側
(index.js)
const xxx = require("./xxx"); import xxx from "./xxx";
Node.js (サーバーサイドJS)
の仕様

6. JavaScriptのimport/export
6
CommonJS Modules ES Modules
export側
(xxx.js)
module.exports = xxx; export default xxx;
import側
(index.js)
const xxx = require("./xxx"); import xxx from "./xxx";
ECMAScript2015の仕様

7. JavaScriptのimport/export
7
CommonJS Modules ES Modules
export側
(xxx.js)
module.exports = xxx; export default xxx;
import側
(index.js)
const xxx = require("./xxx"); import xxx from "./xxx";

8. アジェンダ
JavaScriptのimport/export
ES Modulesの実装状況
webpack4がリリース
Parcelの紹介
8

9. ブラウザの対応状況
9
import - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/
Statements/import

10. Node.jsでES Modules
拡張子をすべて .mjs とする
--experimental-modulesフラグを指定
10
使える...が、Warningが表示される

11. アジェンダ
JavaScriptのimport/export
ES Modulesの実装状況
webpack4がリリース
Parcelの紹介
11

12. バンドルツール
12
ツール 特徴 対応
browserify シンプル CommonJS Modules
webpack 多機能
CommonJS Modules
ES Modules
CSS
Images

13. バンドルツール
13
ツール 特徴 対応
browserify シンプル CommonJS Modules
webpack 多機能
CommonJS Modules
ES Modules
CSS
Images

14. webpack
webpack4から設定ファイルなしで動作
CLIで使うには webpack と webpack-cli を使用
14

15. アジェンダ
JavaScriptのimport/export
ES Modulesの実装状況
webpack4がリリース
Parcelの紹介
15

16. 16
設定ファイル不要
js,cssなどの依存関係を
調査しトランスパイル・
バンドルを行う