You don't know ES Modules

You don't know ES Modules

1. 1. YOU DON'T KNOW ES Modules @teppeis Node #21 June 29, 2016
2. 2. Hello! • Teppei Sato, @teppeis • Cybozu, Inc. / kintone
3. 3. kintone.com
4. 4. (Module ) https://gihyo.jp/dp/ebook/2015/978-4-7741-7477-8
5. 5. History of JavaScript Modules
6. 6. Module Pattern Ext.namespace("myNameSpace"); myNameSpace.app = function() { // private variables var privVar1 = 11; // private functions var btn1Handler = function( button, event ) { }; // public space return { // public methods init: function() { // ... } }; }();
7. 7. AMD (RequireJS) define(['require', 'dep1', 'dep2'], function(require) { var dependency1 = require('dep1'), dependency2 = require('dep2'); return function() {}; });
8. 8. CommonJS Module (CJS) // foo.js module.exports = function() { // ... }; // main.js var foo = require('./foo');
9. 9. • • • •
10. 10. • • ex) browserify, webpack var moduleName = 'foo'; if (someCondition) { moduleName = 'bar'; } var module = require(moduleName);
11. 11. • • Node.js • 3rd party • • •
12. 12. ES6 Modules
13. 13. export/import // export.js export default function() { return "foo"; } // import.js import foo from "./export.js"; foo();
14. 14. Awesome! • • parse • • • • write one, run anywhere!? • `Module` is the new script • strict • top level `this`: undefined • `await`: future reserved word
15. 15. Syntax
16. 16. Default export/import // export.js export default function() { return "foo"; } // import.js import foo from "./export.js"; foo();
17. 17. Named export/import // export.js export function foo() { return "foo"; } export class Bar {} export var baz = "baz"; // import.js import {foo, Bar, baz} from "./export.js"; foo(); new Bar(); console.log(baz); // "baz"
18. 18. Mixed // export.js export default function() { return "Default"; } export function foo() { return "Named"; } // import.js import def, {foo} from "./export.js"; def(); // "Default" foo(); // "Named"
19. 19. Default • ES6 Modules Default Export 
 • Named Export 
 import • 1 module 1 export
20. 20. : • default export 
 named export
21. 21. Default export property // export.js export default { foo: "Default Property" }; export var foo = "Named"; // import.js import def, {foo} from "./export.js"; console.log(def.foo); // "Default Property" console.log(foo): // "Named"
22. 22. Static and Declarative
23. 23. Static • • SyntaxError • Browserify • •
24. 24. export default SyntaxError! // export.js export default function() { return "foo1"; } export default function() { return "foo2"; }
25. 25. import SyntaxError! // import.js import foo from "./missing-module.js";
26. 26. import // export.js export function foo() { return "foo"; } // import.js import bar from "./export.js"; SyntaxError!
27. 27. Rollup: tree shaking http://rollupjs.org/
28. 28. MS Edge https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/
29. 29. Standard and Universal
30. 30. • ES Syntax 
 • • Node • Write once, run anywhere!? • …
31. 31. Module is the new script
32. 32. Script or Module • ES6 2 • 15.1.9 `ScriptEvaluationJob(sourceText)` • 15.2.1.16.1 `ParseModule(sourceText)` • Script Module •
33. 33. Module • strict • top level scope, not global scope • top level `this`: undefined • `await`: future reserved word • top level await • HTML comment
34. 34. in Modules // SyntaxError! (strict mode) with (obj) {} console.log(this); // undefined var foo = 1; // module local, not global var await = 1; // SyntaxError! (future reserved word) <!-- console.log() --> // SyntaxError! (HTML comment)
35. 35. https://twitter.com/domenic/status/743981311568785408
36. 36. ECMAScript
37. 37. ECMAScript • • Module • • Loader API • • API
38. 38. ECMAScript • • : whatwg/html • Node.js: nodejs/node-eps • Loader API • whatwg/loader
39. 39. Loading semantics whatwg/loader
40. 40. whatwg/loader • This repository consolidates work on the ECMAScript module loading semantics with the integration points of Web browsers, as well as Node.js.
 https://github.com/whatwg/loader • `<script>` 
 whatwg/html (#83) • roadmap 

41. 41. Dynamic Loader API (reflection) • System.loader.import('./foo.js').then(foo => { // use foo! });
42. 42. Loader pipeline (hooks) 1. resolve 2. fetch 3. translate 4. instantiate
43. 43. Modules in browsers whatwg/html
44. 44. whatwg/html • PR: https://github.com/whatwg/html/pull/443 • 4.12 The elements > Scripting • script • 8.1 Web app APIs > Scripting • fetch, parse
45. 45. <script type=“module”> External module <script type="module" src="./foo.js"></script> Inline module <script type="module"> import fo from './foo.js'; console.log(foo()); </script>
46. 46. type=“module” • • 
 • • 
 MIME ”module” type • 
 MIME
47. 47. scope <script> <script> var foo = 1; </script> <script type="module"> console.log(typeof foo); // undefined console.log(window.foo); // 1 var foo = 2; console.log(window.foo); // 1 console.log(foo); // 2 </script> <script type="module"> console.log(typeof foo); // undefined console.log(window.foo); // 1 var foo = 3; console.log(window.foo); // 1 console.log(foo); // 3 </script>
48. 48. • import • URL • "/", "./", "../" URL • TypeError! • URL • inline: document base • external, imported: URL • ".js"
49. 49. // OK import "https://example.com/lodash.js"; import "/lodash.js"; import "./lodash.js"; import "../lodash.js"; // NG import ".../lodash.js"; import "lodash.js"; import "lodash";
50. 50. defer • 
 fetch • fetch 
 • DOM
51. 51. async • 
 fetch • 
 module fetch • <script type="module" src="./foo.js" async></script>
52. 52. cors mode • import 
 CORS • CDN // from `https://example.com/foo.html` import $ from 'https://cdn.example.com/jquery.js'; // cdn.example.com must send `Access-Control-Allow-Origin` header
53. 53. crossorigin • crossorigin import cookie 
 (credentials mode) • default: omit • "anonymous": same-origin • "use-credentials": include • cookie 
 JS
54. 54. Module Workers • • module importScripts TypeError // Web Worker const worker = new Worker("worker.js", {type: "module"}); // Service Worker navigator.serviceWorker.register("sw.js", {type: "module"});
55. 55. • realm URL • URL HTTP 1 • realm <script type="module"> import './foo.js'; // sends HTTP request </script> <script type="module"> import './foo.js'; // doesn't send request </script>
56. 56. • UTF-8 • meta Content-Type charset • Content-Type JavaScript MIME Type • Chrome/IE `X-Content-Type: nosniff` • module export • script src URL fetch 
 document insert
57. 57. • Edge: https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/ • Preview 
 • Chrome: https://bugs.chromium.org/p/v8/issues/detail?id=1569 • Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=568953 • WebKit: https://bugs.webkit.org/show_bug.cgi?id=147340 • JSC const
58. 58. Modules in Node.js nodejs/node-eps
59. 59. ES6 Modules
60. 60. • npm Node.js • Node.js V8 • V8 whatwg/loader
61. 61. … https://flic.kr/p/4ZaDRz
62. 62. • •
63. 63. • ES Modules • • CJS Modules ES Modules • import "cjs" • require("esm")
64. 64. ES Modules • 2 : Module or Script • ES6 • • `<script type=module>` • Node.js CJS Script • • require, module, exports
65. 65. Module or Script? // global scope? function foo(value) { // the arguments object is modified? value = value || ''; var args = [].slice.call(arguments); // what is `this`? args.unshift(this); return args; } foo(null);
66. 66. How to detect • New Pragma: "use module"; • New file extension: .mjs • Content sniffing • package.json
67. 67. New Pragma: "use module"; • strict 
 `"use module”;` • Cons • Unacceptable boilerplate tax • : 
 •
68. 68. New file extension: .mjs • ".mjs" Module • `import './foo'` foo.mjs, foo.js • Cons • "*.js" 
 • : .jsx • Modules .mjs • bin •
69. 69. Content sniffing • Module 
 Script • Cons • import/export • •
70. 70. package.json (a): entry point • package.json module 
 • type=module • Rollup jsnext:main { // ... "main": "old/index.js", "module": "lib/index.js", // ... }
71. 71. package.json (a): entry point • Cons • package.json • Module • import ( ) import "foo/bar";
72. 72. package.json (b): white list • package.json Module 
 • import { // files and directories: "modules": ["special.js", "lib", "bin/hello.js"], // if package never uses CJS Modules "modules": ["."], }
73. 73. .mjs draft
74. 74. Defense of .js
75. 75. Defense of .js • https://github.com/dherman/defense-of-dot-js/ • Dave Herman, Yehuda Katz, Caridy Patiño • package.json (a)(b) • modules.root pacakge.json • ES Modules • .js .mjs 
 package.json • interop : https://github.com/dherman/defense-of-dot-js/issues/6
76. 76. Unambiguous JavaScript Grammar
77. 77. Unambiguous JavaScript Grammar • https://github.com/bmeck/UnambiguousJavaScriptGrammar • bmeck (Bradley Meck), jdalton • content sniff Module 
 import export • 7 TC39 ( bmeck TC39 ) • 
 package.json CLI
78. 78. Unambiguous, but Redundant • https://github.com/bmeck/UnambiguousJavaScriptGrammar/issues/14 <script type="module"> console.log('hello'); export {}; // Required !!! </script>
79. 79. https://twitter.com/awbjs/status/743146150828482561
80. 80. • ES Modules 
 vs. • TC39/ Node • Node
81. 81. https://twitter.com/awbjs/status/744701901560651777
82. 82. IMO • JS Module • `type=module` • Universal! Node • Unambiguous export {} Node • • import(cjs) interop
83. 83. • ES Modules • ES / • ES Modules • • Node.js ES Modules • 7 TC39 meeting