You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jul 13, 2020. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+24-28
Original file line number
Diff line number
Diff line change
@@ -2,44 +2,31 @@
2
2
3
3
Dynamically loads ES6 modules in NodeJS and current browsers.
4
4
5
-
* Provides an asynchronous loader (`System.import`) to [dynamically load ES6 modules](#getting-started) in all modern browsers including IE9+.
6
-
* Uses [Traceur](https://github.com/google/traceur-compiler) for compiling ES6 modules and syntax into ES5 in the browser with source map support
7
-
* Adds support for the `<script type="module">` tag allowing inline module loading.
8
-
* Loader hooks can be used to [extend the System loader with custom functionality](#creating-a-custom-loader)
9
-
*[Compatible with NodeJS](#nodejs-support) allowing for server-side module loading
5
+
* Implemented to the [Jan 20 ES6 Specification draft, rev 22](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-ecmascript-language-modules-and-scripts).
6
+
* Provides an asynchronous loader (`System.import`) to [dynamically load ES6 modules](#getting-started).
7
+
* Uses [Traceur](https://github.com/google/traceur-compiler) for compiling ES6 modules and syntax into ES5 in the browser with source map support.
10
8
* Polyfills ES6 Promises in the browser with a bundled [when.js](https://github.com/cujojs/when/blob/master/docs/es6-promise-shim.md) implementation.
11
-
12
-
The complete combined polyfill comes to 22KB minified, making it suitable for production use, provided that modules are built into ES5 making them independent of Traceur. Build workflows are currently in progress.
9
+
*[Compatible with NodeJS](#nodejs-support) allowing for server-side module loading.
10
+
* Supports ES6 module loading in IE9+, and any other module formats in IE8+.
11
+
* The complete combined polyfill comes to 7.4KB minified and gzipped, making it suitable for production use, provided that modules are built into ES5 making them independent of Traceur.
12
+
For an overview of build workflows, [see the production guide](#moving-to-production).
13
13
14
14
See the [demo folder](https://github.com/ModuleLoader/es6-module-loader/blob/master/demo/index.html) in this repo for a working example demonstrating both module loading the module tag in the browser.
15
15
16
16
For an example of a universal module loader based on this polyfill for loading AMD, CommonJS and globals, see [SystemJS](https://github.com/systemjs/systemjs).
17
17
18
-
_Current version tested against **[Traceur 0.0.30](https://github.com/google/traceur-compiler/tree/traceur%400.0.30)**._
19
-
20
-
_Note that while the specification draft has been written, it is still subject to change._
18
+
_The current version is tested against **[Traceur 0.0.32](https://github.com/google/traceur-compiler/tree/traceur%400.0.32)**._
21
19
22
-
## Background
23
-
24
-
The new ES6 module specification defines a module system in JavaScript using `import` and `export` syntax. For dynamically loading modules, a dynamic module loader factory is also included in the specification (`new Loader`).
25
-
26
-
A separate browser specification defines a dynamic ES6 module loader loader for the browser, `window.System`, as well as a `<script type="module">` tag for using modules.
27
-
28
-
This polyfill implements the `Loader` and `Module` globals, exactly as specified in the [2013-12-02 ES6 Module Specification Draft](https://github.com/jorendorff/js-loaders/blob/e60d3651/specs/es6-modules-2013-12-02.pdf) and the `System` browser loader exactly as suggested in the [sample implementation](https://github.com/jorendorff/js-loaders/blob/964623c75d/browser-loader.js).
20
+
_Note the ES6 module specification is still in draft, and subject to change._
29
21
30
22
## Getting Started
31
23
32
-
Download both [es6-module-loader.js](https://raw.githubusercontent.com/ModuleLoader/es6-module-loader/v0.5.1/dist/es6-module-loader.js) and [traceur.js](https://raw.githubusercontent.com/google/traceur-compiler/[email protected].30/bin/traceur.js) into the same folder.
24
+
Download both [es6-module-loader.js](https://raw.githubusercontent.com/ModuleLoader/es6-module-loader/v0.5.4/dist/es6-module-loader.js) and [traceur.js](https://raw.githubusercontent.com/google/traceur-compiler/[email protected].32/bin/traceur.js) into the same folder.
33
25
34
-
If using ES6 syntax (optional), include traceur.js in the page first:
26
+
If using ES6 syntax (optional), include `traceur.js` in the page first then include `es6-module-loader.js`:
35
27
36
28
```html
37
29
<scriptsrc="traceur.js"></script>
38
-
```
39
-
40
-
Then include `es6-module-loader.js`:
41
-
42
-
```html
43
30
<scriptsrc="es6-module-loader.js"></script>
44
31
```
45
32
@@ -54,7 +41,7 @@ mymodule.js:
54
41
}
55
42
```
56
43
57
-
We can then load this module with a module tag in the page:
44
+
Load this module with a module tag in the page:
58
45
59
46
```html
60
47
<scripttype="module">
@@ -87,7 +74,13 @@ Note that the dynamic module loader uses promises for resolution. Modules can ha
87
74
});
88
75
```
89
76
90
-
## Terminology
77
+
## Background
78
+
79
+
### Specifications
80
+
81
+
The new ES6 module specification defines a module system in JavaScript using `import` and `export` syntax. For dynamically loading modules, a dynamic module loader factory is also included in the specification (`new Loader`).
82
+
83
+
A separate browser specification defines a dynamic ES6 module loader for the browser, `window.System`, as well as a `<module>` tag for using modules.
91
84
92
85
### Modules and Module Loaders
93
86
@@ -233,13 +226,14 @@ It is also possible to define wildcard paths rules. The most specific rule will
233
226
});
234
227
```
235
228
229
+
<aname="moving-to-production">
236
230
## Moving to Production
237
231
238
232
When in production, one wouldn't want to load ES6 modules and syntax in the browser. Rather the modules would be built into ES5 and AMD to be loaded.
239
233
240
-
Also, suitable bundling would need to be used.
234
+
Additionally, suitable bundling would need to be used.
241
235
242
-
We are actively working on these workflows.
236
+
Traceur provides build outputs that can be loaded with extensions to the module loader including AMD, CommonJS and a System.register build.
243
237
244
238
## Module Tag
245
239
@@ -395,6 +389,8 @@ See the source of https://github.com/ModuleLoader/es6-module-loader/blob/master/
395
389
396
390
To follow the current the specification changes, see the marked issues https://github.com/ModuleLoader/es6-module-loader/issues?labels=specification&page=1&state=open.
397
391
392
+
393
+
398
394
## Contributing
399
395
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](https://github.com/cowboy/grunt).
0 commit comments