ECMAScript 6 supports original eco-modularity, ECMAScript 6 Modular Overview

At the end of July 2014, another meeting of TC39 finalized some of the last details about the ECMAScript 6 modular syntax. This article provides a complete overview of the ES6 module system.

1. The current JavaScript module system.

JavaScript does not currently have built-in methods to support modularity, but the community has created a very good workaround. Two important (unfortunately mutually incompatible) criteria are:

1. COMMONJS modularity: This standard is mainly used in Node.js (Node.js modularity has some features beyond the COMMONJS syntax).
Features: Simple syntax, designed for synchronous loading, mainly used on server side.

2. Asynchronous module definition (AMD): The most popular application of this standard is Requirejs.
Features: Slightly complex syntax allows AMD to implement (or compile the process) without eval (or compiler), designed for asynchronous loading, primarily for use in the browser side.

The above is simply a rough explanation of the current situation, and if you want to learn more about it, you can read the Addy Osmani "use Amd,commonjs and ES Harmony to write modular JavaScript."


2. ECMAScript 6 Modular

The goal of ECMAScript 6 modularity is to create a way that Commonjs and AMD users are willing to accept:
1. Similar to COMMONJS, with concise syntax, a preference for a single interface and support for circular dependencies.
2. Similar to AMD, directly supports asynchronous loading and configuration module loading.

The built-in language allows ES6 to be modular beyond the COMMONJS and AMD specifications (described later in detail):
1. Grammar will be more concise than COMMONJS.
2. The structure can do static analysis (static detection, optimization, etc.).
3. A better cyclic dependency than commonjs.

The ES6 modular standard consists of two parts:
1. Declarative syntax (introduction and Export).
2. Programmatic loading interface: Used to configure how modules are loaded and conditionally loaded.
3. ES6 Module Syntax overview

There are two ways to export: A named export (each module can be multiple) and a defined export (one for each module).

3.1. Named export (each module can be multiple)

A module can export multiple by using the Prefix keyword Export declaration.
These exports are distinguished by name, which is called a named-type export.

-----lib.js------
Export const SQRT = math.sqrt;
Export function Square (x) {
return x*x;
}
Export function diag (x, y) {
return sqrt (square (x) + square (y));
}

--------main.js-------
import{Square, Diag} from ' Lib ';
Console.log (Square (11)); 121
Console.log (Diag (4, 3)); 5

There are other ways to define a named export (described later), but I find this approach most convenient: if you don't have an outer environment, you can write the code very simply and then identify everything with the keyword you want.

If you want, you can also import an entire module and point to the named export by attribute naming:

Import * As Lib Grom ' Lib ';
Console.log (Lib.square (11)); 121
Console.log (Lib.diag (4, 3)); 5


The same code under the COMMONJS syntax: There was a time when I tried several good strategies under node.js to reduce the code redundancy when my module was exported. Now I prefer the following simple but slightly verbose style, somewhat similar to the modular pattern:

----lib.js-----
var sqrt = math.sqrt;
function Square (x) {
return x*x;
}
function diag (x, y) {
return sqrt (square (x) + square (y));
}

Module.exports = {
SQRT:SQRT,
Sqare:sqare,
Diag:diag
}

------main.js------
var square = require (' lib '). Square;
var diag = require (' lib '). Diag;
Console.log (Square (11)); 121
Console.log (Diag (4, 3)); 5


3.2. Define export (one per module only)

A very popular module in the Node.js community exports a single value. Of course in the need to often have constructors and classes to create models of front-end development in the same class, one module one model. A ECMAScript 6 module can be exported by definition, exporting the most important values. A defined export is easy to reference.

The following is a single function ECMAScript 6 module:

-----myfunc.js-------
Export default function () {};

------Main.js--------
Import MyFunc from ' MyFunc ';
MyFunc ();

The ECMAScript 6 module that defines the export of a class is as follows:

-----myclass.js-------
Export default Class () {};

------Main.js--------
Import MyClass from ' MyClass ';
Let inst = new MyClass ();

Note: The operand of a defined export declaration is an expression that often does not require a name. Instead, it is confirmed by the name of the module.

3.3. Using named and defined exports in the same module

The pattern is very common in JavaScript: a library is just a single function, but it provides additional support through the properties of the function. Includes JQuery and Underscore.js. The following is a simple underscore as a COMMONJS module:

----------Underscore.js----------
var _ = function (obj) {};
var each = _.each = _foreach = function (obj, iterator, context) {}

Module.esports = _;

----------Main.js---------
var _ = require (' underscore ');
var each = _.each;

Under ES6, function _ is a defined export and each and ForEach are named-derived. This proves that, in fact, both named and defined exports can be made at the same time. For example, the previous Commonjs module, to ES6 to rewrite the module, as follows:

--------Underscore.js--------------
Export default function (obj) {}
Export function each (obj, Itertor, context) {}
Export {each as ForEach}

--------Main.js------------
Import _, {each} from ' underscore ';

Note that the COMMONJS version and the ECMAScript 6 version are only roughly the same. The latter is a flat structure, while the former is a nested structure. What style you prefer has its own decision, but a flat structure has the advantage of doing static analysis (the benefits are mentioned below). The Commonjs style appears to be a namespace for satisfying the needs of the object, and can be implemented by ES6 modules.

A defined export is just another form of named Export.

A defined export is in fact a named export that uses the special name default. That is, the following two are equivalent:

Import {default as Foo} from ' Lib ';
Import foo from ' Lib ';

Similarly, the following two are also equivalent defined export:

--------Module1.js-----------
Export default 123;
--------Module2.js-----------
Const D = 123;
Export {D as default};

So why do we need a named-to-export?
You might wonder, why do we also need a named export instead of a single defined export object similar to the Commonjs form? The answer is that you can't enforce a static structure through objects and lose the associated advantage.


5. Import and export more information

5.1. Import

ECMAScript 6 provides the following import methods:

Defining export and named-Export
Import Thedefault, {named1, named2} from ' Src/mylib ';
Import thedefault from ' Src/mylib ';
Import {named1, named2} from ' Src/mylib ';

Renaming: Importing named1 as MyNamed1
Import {named1 as myNamed1, named2} from ' Src/mylib ';

As a cashing import module (each named export is a property)
Import * as Mylib from ' src/mylib ';

Load only modules without exporting
Import ' Src/mylib '

5.2. Export

There are two ways of exporting within the current module. One is to export with the keyword export tag.

Export var myVar1 = ...;
Export Let MyVar2 = ...;
Export Const MYVAR3 = ...;

Export function MyFunc () {...}
Export function* Mygeneratorfunc () {...}
Export Class myclass{...}

Operator default exports expressions (including function expressions, class expressions). For example:

Export default 123;
Export default function (x) {
return x;
}
Export default x => x;
Export Default class{
Constructor (x, y) {
this.x = x;
This.y = y;
}
}

The other way is to put all the listings you want to export into the bottom of the module (style is similar to module mode).

Const MY_CONST = ...;
function MyFunc () {
...
}

Export {my_const, myFunc};

You can also export by using a different name:

Export {My_const as The_const, myFunc as Thefunc};

Remember that you cannot use reserved words as variable names (such as default and new), but you can use them as export names (you can also use them as property names in ECMAScript 5). If you are importing these named exports directly, you will need to rename them using variable names.

5.3. Re-export

Re-exporting means that you add another module's export in the current module. You can look at adding all the modules exported.

Export * from ' src/other_moule ';

Or you can add the selected (by renaming):

Export {foo, bar} from ' Src/other_moule ';
To export the module Other_module foo in Myfoo
Export {foo as Myfoo, bar} from ' Src/other_moule ';


6. Meta data for modules

ECMAScript 6 also provides a way to access the current module data within a module, such as the URL of a module, as follows:

Import {URL} from this module;
Console.log (URL);

This module represents a simple identity that imports metadata as a module. It can also be used as a module meta data.
You can also access meta data through objects:

Import * As MetaData from this module;
Console.log (Metadata.url);

Node.js uses the module local variable __filename to act as such metadata.


7. Eval () and module

Eval () does not support module syntax. it resolves the parameters according to the script syntax rules, and the script does not support the module syntax (explain later). If you want to run the module code, you can use the module Loader API (described later).


8. ECMAScript 6 Module Loader API

In addition to the work that defines the module syntax, there is a programmatic API that allows:
1. Programmatic use of modules and scripts
2. Configuration module Loading.

The loader solves the loading module of the module modifier (string ID after import ... from). Constructors are reflect.loader. Each platform has its own specific global variable system (System loader) to implement its platform-specific module loading mode.

8.1. Import module and Load script

You can import a module programmatically via the ES6 promises API:

System.import (' Some_moule ')
. Then (Some_module => {
...
} )
. catch (Error => {
...
} )

System.import () allows you to:
1. Use modules inside <script> tags (no module syntax is supported).
2. Restrictive loading module.

System.import () can load a single module and import multiple modules you can use Promise.all ():

Promise.all (
[' Module1 ', ' module2 ', ' module3 ']
. map (x => system.import (x))
. Then ({
...
} );


More ways to load:
1. System.module (source, options?) run JavaScript code in the source's module (asynchronous form via promise)
2. System.set (name, module) for registering a module (one you create through System.module ()).
3. System.define (name, source, option?) Run the module code and register the results.

8.2. Configuration Module Loading

The module loader API is configured with a variety of hooks. The completion of the work is still in progress. The first system loader developed for the browser is currently implementing the test. The goal is to find the best way to configure the module load.
The loader API needs to allow a variety of custom loads, such as:
1. Whether the test module conforms to lint (e.g. through jslint or jshint) when importing
2. Automatic translation module When importing (there may be coffeescript or typescript code in the module)
3. Use of traditional modules (amd,node.js)

Configuration module loading is restricted in Node.js and Commonjs.

9. Blueprint

The following answers two questions about the ECMAScript 6 module: How does it work? How do i insert into HTML?
1. The "How to use ECMAScript 6" "Translation Here" provides an overview of ECMAScript 6, explaining how to compile it to ECMAScript 5. If you are interested you can start reading from here (Http://www.2ality.com/2014/08/es6-today.html#using_ecmascript_6_today). A small and interesting solution ES6 module Transplier just added the ES6 module syntax to ES5, neither AMD nor COMMONJS.
2. Insert ES6 in HTML: The code in the <script> tab does not support module syntax because the synchronization characteristics of the elements conflict with the asynchronous nature of the module. Instead, you can use the new <module> tags. The article "ECMAScript 6 modular http://www.2ality.com/2013/11/es6-modules-browsers.html in the Future browser" introduces the working principle of <module>. There are several obvious advantages over <script>, and alternative versions of <script type= ' module ' > can be selected.
3. Commonjs vs Es6:ecmascript 6 Modular Quick Introduction (http://jsmodules.io/). Interestingly, the contents of the Commonjs module are displayed on the second page of their ECMAScript version 6.



The advantages of the ECMAScript 6 module

At first glance, the built-in modularity in ECMAScript 6 is worrying, after all, we've got several good modular systems. But ECMAScript 6 is where you can get rid of those libraries to implement a very complex syntax or a static module structure (for optimization, static detection, etc.). It is also likely to end the current split state between Commonjs and AMD.

Having an independent native module means:
1. There will be no more UMD (Common module definition): UMD means a schema name used by different modular systems (for example, Commonjs and AMD) for the same file. Once ES6 becomes the only modular standard, then UMD becomes the past.
2. The new browser API will replace the previous module's global variable or Navigater attribute.
3. Objects are no longer needed as namespaces: in Ecmscript 5

Thanks: thank Domenic DeNicola for the help of the modular Final solution. This article also thanks: Guy Bedfod,john K. Pual,mathias bynens,michael Ficarra.

Original address: http://www.2ality.com/2014/09/es6-modules-final.html
Original Author: Dr. Axel Rauschmayer
Translator: Ni Ying
Address: Lovenyf.blog.chinaunix.net