From 9af485a584e47fd503ed5c62b9f6482574715f1e Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 10 Oct 2016 03:50:11 +0200 Subject: Squashed 'thirdparty/systemjs/' content from commit 5ed69b6 git-subtree-dir: thirdparty/systemjs git-subtree-split: 5ed69b6344e8fc1cd43bf758350b2236f57e1499 --- docs/module-formats.md | 228 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 docs/module-formats.md (limited to 'docs/module-formats.md') diff --git a/docs/module-formats.md b/docs/module-formats.md new file mode 100644 index 000000000..3bafda590 --- /dev/null +++ b/docs/module-formats.md @@ -0,0 +1,228 @@ +### Module Formats + +The following module formats are supported: + +* `esm`: ECMAScript Module (previously referred to as `es6`) +* `cjs`: [CommonJS](#commonjs) +* `amd`: [Asynchronous Module Definition](#amd) +* `global`: [Global shim module format](#globals) +* `register`: [System.register](system-api.md#systemregister-name-deps-declare) or [System.registerDynamic](system-api.md#systemregisterdynamic-name-deps-executingrequire-declare) compatibility module format + +The module format can be set via meta configuration: + +```javascript +System.config({ + meta: { + './module/path.js': { + format: 'esm' + } + } +}); +``` + +#### Module format detection + +When the module format is not set, automatic regular-expression-based detection is used. +This module format detection is never completely accurate, but caters well for the majority use cases. + +The module format detection happens in the following order: +* _System.register / System.registerDynamic_ + If the source code starts with a number of comments, followed by `System.register` or `System.registerDynamic` as the first line of code. +* _ES modules_ + The source is only detected as an ES module if it contains explicit module syntax - valid `import` or `export` statements. +* _AMD modules_ + The presence of a valid AMD `define` statement in the code. +* _CommonJS modules_ + The presence of `require(...)` or `exports` / `module.exports` assigments +* _Global_ + This is the fallback module format after all the above fail. + +> Note that ES6 modules are detected via the presence of `import` and `export` module syntax and no other features at all. This is because the transpilation applies to the module format specifically, not the language. + +#### Inter-Format Dependencies + +Any module type can be loaded from any other type with full support thanks to [zebra-striping](https://github.com/ModuleLoader/es6-module-loader/blob/v0.17.0/docs/circular-references-bindings.md#zebra-striping). + +When loading CommonJS, AMD or Global modules from within ES6, the full module is available at the `default` export which can be loaded with the default import syntax. + +For convenience, named exports are also auto-populated but may not be correctly bound as expected, so use these carefully. + +./app/es6-loading-commonjs: +```javascript +// entire underscore instance +import _ from './underscore.js'; + +// unbound named export +import {map} from './underscore.js'; +``` + +### ES6 + +ES6 modules are automatically transpiled as they are loaded, using the loader [transpiler option](config-api.md#transpiler) set. + +Circular references and bindings are implemented to the ES6 specification. + +The `__moduleName` local variable is also available, pending clarification of the module meta in the WhatWG loader spec. + +This provides the fully normalized name of the current module which can be useful for dynamically loading modules relative to the current module via: + +```javascript +System.import('./local-module', __moduleName); +``` + +In due course this will be entirely replaced by the contextual loader once this has been specified. + +_ES6 is loaded via XHR making it non-[CSP](http://www.html5rocks.com/en/tutorials/security/content-security-policy/) compatible. ES6 should always be built for production to avoid transpiler costs, making this a development-only feature._ + +### CommonJS + +* The `module`, `exports`, `require`, `global`, `__dirname` and `__filename` variables are all provided. +* `module.id` is set. + +When executing CommonJS any global `define` is temporarily removed. + +For comprehensive handling of NodeJS modules, a conversion process is needed to make them SystemJS-compatible, such as the one used by jspm. + +_CommonJS is loaded via XHR making it non-[CSP](http://www.html5rocks.com/en/tutorials/security/content-security-policy/) compatible._ + +Note that CommonJS modules on npm, loaded as CommonJS may well not load correctly through SystemJS. This is because SystemJS +does not implement the NodeJS loading algorithm. + +If you want to load NodeJS modules through SystemJS you can use `import nodeModule from '@node/node-module-name'`, but this should only +be used when absolutely necessary as it stops code from being universal, and makes it only compatible with NodeJS. + +### AMD + +* AMD support includes all AMD structural variations including the [CommonJS wrapper form](http://requirejs.org/docs/api.html#cjsmodule). +* The special `module`, `exports`, and `require` module names are handled at the AMD format level and are not defined in the primary loader registry. `module.uri` and `module.id` are provided with `module.config` as a no-op. +* Named defines are supported and will write directly into the loader registry. +* A single named define will write into the loader registry but also be treated as the value of the module loaded if the names do not match. This enables loading a module containing `define('jquery', ...`. +* Contextual dynamic requires are fully supported (`define(function(require) { require(['./dynamic/require'], callback) })`) + +When executing AMD, the global `module`, `exports` are temporarily removed, and the global `define` and `require` are set to the SystemJS AMD functions. + +_By default AMD modules are loaded via `