1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
## Background
### Modules and Module Loaders
A module is simply a JavaScript file written with module syntax. Modules _export_ values, which can then be _imported_ by other modules.
[CommonJS](http://wiki.commonjs.org/wiki/CommonJS) and [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) JavaScript files are modules.
A module loader provides the ability to dynamically load modules, and also keeps track of all loaded modules in a module registry.
Typically, in production, the module registry would be populated by an initial compiled bundle of modules. Later in the page state, it may become necessary to dynamically
load a new module. This module can then share dependencies with the initial page bundle without having to reload any dependencies.
Module code is treated differently to scripts due to the nature of exports and imports.
This is why the `<script type="module">` tag is introduced to distinguish script code from module code.
### Module Naming
Normalization rules allow module names to be converted into URLs.
This allows module aliases like `import $ from 'jquery'` to be equivalent to writing `import $ from 'https://code.jquery.com/jquery.js'`
Normalization rules are specific to the module loader implementation, with some certain standard conventions set down by the browser loader specification.
## ES6 Module Syntax
### Exporting
ES6 module syntax is most similar to the `exports.method = function() {}` pattern in NodeJS of creating multiple named exports.
In CommonJS one might write:
```javascript
exports.someMethod = function() {
};
exports.another = {};
```
In ES6, this same code would be written:
exporter.js:
```javascript
export function someMethod() {
}
export var another = {};
```
Notice that the name of the function, class or variable gets used as the export name.
### Importing
When importing, we import any exports we need by name, and can also choose to rename them:
importer.js:
```javascript
import { someMethod, another as newName } from './exporter';
someMethod();
typeof newName == 'object';
```
### Default Import and Export
Sometimes one doesn't want to write an import name at all. For this we can use the default export:
export-default.js:
```javascript
export default function foo() {
console.log('foo');
}
```
import-default.js:
```javascript
import customName from './export-default';
customName(); // -> 'foo'
```
### All Supported Syntax
There are a few other variations of module syntax, the full list of supported statements is listed below.
```javascript
import 'jquery'; // import a module without any import bindings
import $ from 'jquery'; // import the default export of a module
import { $ } from 'jquery'; // import a named export of a module
import { $ as jQuery } from 'jquery'; // import a named export to a different name
export var x = 42; // export a named variable
export function foo() {}; // export a named function
export default 42; // export the default export
export default function foo() {}; // export the default export as a function
export { encrypt }; // export an existing variable
export { decrypt as dec }; // export a variable as a new name
export { encrypt as en } from 'crypto'; // export an export from another module
export * from 'crypto'; // export all exports from another module
// (except the default export)
import * as crypto from 'crypto'; // import an entire module instance object
```
Note that any valid declaration can be exported. In ES6, this includes `class` (as in the example above), `const`, and `let`.
|
