Skip to content

Commit 1530db0

Browse files
committed
update documentation
1 parent 766a815 commit 1530db0

8 files changed

+69
-178
lines changed

README.md

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
# ES6 Module Loader Polyfill [![Build Status][travis-image]][travis-url]
22

3-
_For upgrading to ES6 Module Loader 0.16, [read the release notes here](https://github.com/ModuleLoader/es6-module-loader/releases/tag/v0.16.0)._
3+
_For upgrading to ES6 Module Loader 0.17, [read the release notes here](https://github.com/ModuleLoader/es6-module-loader/releases/tag/v0.17.0)._
44

55
Dynamically loads ES6 modules in browsers and [NodeJS](#nodejs-use) with support for loading existing and custom module formats through loader hooks.
66

77
This project implements dynamic module loading through `System` exactly to the previous ES6-specified loader API at [2014-08-24 ES6 Specification Draft Rev 27, Section 15](http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#august_24_2014_draft_rev_27). The new loader implementing the [WhatWG loader spec](https://github.com/whatwg/loader) is pending alpha release on the [1.0 branch](https://github.com/ModuleLoader/es6-module-loader/tree/1.0).
88

99
* Provides an asynchronous loader (`System.import`) to [dynamically load ES6 modules](#getting-started).
1010
* Supports [Traceur](https://github.com/google/traceur-compiler), [Babel](http://babeljs.io/) and [TypeScript](https://github.com/Microsoft/TypeScript/) for compiling ES6 modules and syntax into ES5 in the browser with source map support.
11-
* Fully supports [ES6 circular references and live bindings](https://github.com/ModuleLoader/es6-module-loader/wiki/Circular-References-&-Bindings).
12-
* Includes [`baseURL` and `paths` implementations](https://github.com/ModuleLoader/es6-module-loader/wiki/Configuring-the-Loader).
13-
* Can be used as a [tracing tool](https://github.com/ModuleLoader/es6-module-loader/wiki/Tracing-API) for static analysis of modules.
14-
* Polyfills ES6 Promises in the browser with an optionally bundled ES6 promise implementation.
11+
* Fully supports [ES6 circular references and live bindings](docs/circular-references-bindings.md).
12+
* Includes [`baseURL` and `paths` implementations](docs/Configuring-the-Loader.md).
13+
* Can be used as a [tracing tool](docs/tracing-api.md) for static analysis of modules.
1514
* Supports IE8+, with IE9+ support for ES6 development without pre-compilation.
16-
* The complete combined polyfill, including ES6 promises, comes to 9KB minified and gzipped, making it suitable for production use, provided that modules are [built into ES5 making them independent of Traceur](https://github.com/ModuleLoader/es6-module-loader/wiki/Production-Workflows).
15+
* The minified production loader is under 5KB minified and gzipped, making it suitable for production use, provided that modules are [built into ES5 making them independent of Traceur](docs/production-workflows.md).
1716

18-
For an overview of build workflows, [see the production guide](https://github.com/ModuleLoader/es6-module-loader/wiki/Production-Workflows).
17+
For an overview of build workflows, [see the production guide](docs/production-workflows.md).
1918

2019
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).
2120

2221
### Documentation
2322

24-
* [A brief overview of ES6 module syntax](https://github.com/ModuleLoader/es6-module-loader/wiki/Brief-Overview-of-ES6-Module-syntax)
25-
* [Configuring the loader](https://github.com/ModuleLoader/es6-module-loader/wiki/Configuring-the-Loader)
26-
* [Production workflows](https://github.com/ModuleLoader/es6-module-loader/wiki/Production-Workflows)
27-
* [Circular References & Bindings](https://github.com/ModuleLoader/es6-module-loader/wiki/Circular-References-&-Bindings)
28-
* [Extending the loader through loader hooks](https://github.com/ModuleLoader/es6-module-loader/wiki/Extending-the-ES6-Loader)
29-
* [Tracing API](https://github.com/ModuleLoader/es6-module-loader/wiki/Tracing-API)
23+
* [Configuring the loader](docs/loader-config.md)
24+
* [Production workflows](docs/production-workflows.md)
25+
* [Circular References & Bindings](docs/circular-references-bindings.md)
26+
* [Extending the loader through loader hooks](docs/loader-extensions.md)
27+
* [Tracing API](docs/tracing-api.md)
3028

3129
### Getting Started
3230

docs/circular-references-bindings.md

+11-6
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,25 @@
22

33
#### Zebra-Striping
44

5-
All [AMD](http://requirejs.org/docs/api.html#circular), [CommonJS](http://nodejs.org/api/modules.html#modules_cycles), and [ES6](https://github.com/ModuleLoader/es6-module-loader#circular-references--bindings) treat circular dependencies differently.
6-
Handling this problem is one of the innovations of the loader spec, using a technique called **zebra-striping**. This involves analyzing the dependency tree and forming alternate layers of ES6 / non-ES6 modules with circular references in each layer for linking.
7-
The layers are then individually linked, with the appropriate circular reference handling being done within each layer. This allows CommonJS circular references to interact with ES6 circular references. Inter-format circular references are not supported as they
8-
would be across layers.
5+
All [AMD](http://requirejs.org/docs/api.html#circular), [CommonJS](http://nodejs.org/api/modules.html#modules_cycles),
6+
and [ES6](https://github.com/ModuleLoader/es6-module-loader#circular-references--bindings) treat circular dependencies differently.
7+
Handling this problem is one of the innovations of the loader spec, using a technique called **zebra-striping**.
8+
This involves analyzing the dependency tree and forming alternate layers of ES6 / non-ES6 modules with circular
9+
references in each layer for linking. The layers are then individually linked, with the appropriate circular reference
10+
handling being done within each layer. This allows CommonJS circular references to interact with ES6 circular references.
11+
Inter-format circular references are not supported as they would be across layers.
912

10-
This loader implementation handles zebra-striping automatically, allowing a loader like [SystemJS](https://github.com/systemjs/systemjs) to support all module formats with exact circular reference support.
13+
This loader implementation handles zebra-striping automatically, allowing a loader like [SystemJS](https://github.com/systemjs/systemjs)
14+
to support all module formats with exact circular reference support.
1115

1216
#### ES6 Circular References & Bindings
1317

1418
ES6 circular references and bindings behave in the following way:
1519

1620
* Bindings are set up before module execution.
1721
* Execution is run from depth-first left to right on the module tree stopping at circular references.
18-
* Bindings are live - an adjustment to an export of one module affects all modules importing it, but it can only be modified in the defining module.
22+
* Bindings are live - an adjustment to an export of one module affects all modules importing it, but it can
23+
only be modified in the defining module.
1924

2025
even.js
2126
```javascript

docs/loader-config.md

+10-17
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
### baseURL
2-
3-
All modules are loaded relative to the `baseURL`, which by default is set to the current page path.
4-
5-
We can alter this with:
6-
7-
```javascript
8-
System.baseURL = '/js/lib/';
9-
System.import('module'); // now loads "/js/lib/module.js"
10-
```
11-
12-
> Note that using `System.import` to load URLs is not currently supported, instead use paths for this as documented below.
13-
141
### Paths Implementation
152

163
The System loader provides paths rules used by the standard `locate` function.
@@ -26,8 +13,6 @@ For example, we might want to load `jquery` from a CDN location. For this we can
2613

2714
Any reference to `jquery` in other modules will also use this same version.
2815

29-
**Be careful**:When developing, System loader uses xhr method to load script from CDN site, so there might be some Cross-Origin problems.
30-
3116
It is also possible to define wildcard paths rules. The most specific rule will be used:
3217

3318
```javascript
@@ -53,12 +38,18 @@ or if using Babel:
5338
System.babelOptions = { experimental: true };
5439
```
5540

41+
or TypeScript:
42+
43+
```javascript
44+
System.typescriptOptions = {};
45+
```
46+
5647
### Finding the Transpiler
5748

5849
For Babel use the `browser.js` file contained in the `babel-core` npm module. For Traceur use the `traceur.js` file contained in the `traceur` npm module bin folder.
5950

6051
The transpiler is loaded as a module itself, so will follow normal paths rules.
61-
52+
>
6253
To set custom paths to Babel or Traceur use paths configuration:
6354

6455
```javascript
@@ -70,4 +61,6 @@ Alternatively if you know that the transpiler will be needed, it will be detecte
7061
```html
7162
<script src="traceur.js"></script>
7263
<script src="es6-module-loader.js"></script>
73-
```
64+
```
65+
66+
> TypeScript can be loaded in the browser, but in Node, must already be defined as a global before loading an ES6 file.

docs/loader-extensions.md

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
### Extending the ES6 Loader
22

3-
The ES6 specification defines a loader through five hooks:
3+
The loader pipeline is based on the following hooks:
44

5-
* Normalize: Given the import name, provide the canonical module name.
6-
* Locate: Given a canonical module name, provide the URL for the resource.
5+
* Normalize: Given the import name, provide the normalized name for the resource.
6+
* Locate: Given a normalized module name, provide the URL for the resource.
77
* Fetch: Given a URL for a resource, fetch its content.
88
* Translate: Given module source, make any source modifications.
99
* Instantiate: Given module source, determine its dependencies, and how to execute it.
@@ -123,6 +123,5 @@ function instantiate(load) {
123123

124124
For a more in-depth overview of creating with custom loaders, some resources are provided below:
125125

126-
* The [System Loader implementation](https://github.com/ModuleLoader/es6-module-loader/blob/master/src/loader.js#L867)
127126
* [ES6 Loader API guide](https://gist.github.com/dherman/7568080)
128127
* [Yehuda Katz's essay](https://gist.github.com/wycats/51c96e3adcdb3a68cbc3) (outdated)

docs/overview.md

-109
This file was deleted.

docs/production-workflows.md

+7-19
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ When in production, it is not suitable to load ES6 modules and syntax in the bro
44

55
#### System.register Output
66

7-
There is a `modules=instantiate` build output in Traceur and `modules=system` output in Babel that can be used with the ES6 Module Loader, provided it has the [System.register extension](https://github.com/systemjs/systemjs/blob/master/lib/extension-register.js)
8-
from [SystemJS](https://github.com/systemjs/systemjs).
7+
There is a `modules=instantiate` build output in Traceur and `modules=system` output in Babel and TypeScript that can be used with the ES6 Module Loader,
8+
provided it has been extended with support for the System.register format.
99

10-
The benefit of this output is that it provides full support for circular references and live module bindings.
10+
This is available from the [system-register-only](https://github.com/systemjs/systemjs/tree/v0.17.0/dist) SystemJS build of the loader.
1111

12-
[This output format is explained here](system-register.md)
12+
The benefit of the [System.register output format](system-register.md) is that it provides [full support for circular references and live module bindings](circular-references-bindings.md).
1313

1414
A basic example of using this extension with a Traceur build would be the following (although the related similar workflow would apply for Babel):
1515

@@ -23,19 +23,7 @@ A basic example of using this extension with a Traceur build would be the follow
2323

2424
```html
2525
<script src="traceur-runtime.js"></script>
26-
<script src="es6-module-loader.js"></script>
27-
<script>
28-
/*
29-
* This should be a separate external script
30-
* Register function is included from https://github.com/systemjs/systemjs/blob/master/lib/extension-register.js
31-
*/
32-
function register(loader) {
33-
// ...
34-
}
35-
36-
// this needs to be added to apply the extension
37-
register(System);
38-
</script>
26+
<script src="system-register-only.js"></script>
3927

4028
<!-- now include the bundle -->
4129
<script src="app-build.js"></script>
@@ -57,10 +45,10 @@ We can also build separate files with:
5745
traceur --dir app app-build --modules=instantiate
5846
```
5947

60-
With the above, we can load from the separate files identical to loading ES6.
48+
With the above, we can load from the separate files identical to loading ES6, but with full CSP compatibility.
6149

6250
#### Building across module formats
6351

6452
If using a loader like [SystemJS](https://github.com/systemjs/systemjs) to load different module formats, then a build can also be performed across module formats as well.
6553

66-
See [SystemJS builder](https://github.com/systemjs/builder) for this combined approach.
54+
See [SystemJS builder](https://github.com/systemjs/builder) for a combined approach.

0 commit comments

Comments
 (0)