ES6 detailed eight: module!

Modules is one of the most important features introduced by ES6.
So later write the module, directly according to ES6 modules syntax to write, and then use Babel + Browserify to package on the line.

The modules specification is divided into two parts, part of how it is exported, and part of how it is imported. Basic Usage named export (named exports)

You can export it directly by adding an export keyword to any variable or function immediately before it.
This writing is very concise, there is little difference in peace, the only difference is to add an export keyword where it needs to be exported.
Like what:

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

It then refers to this in another file:

Import {square, diag} from ' Lib ';
Console.log (Square (11)); 121
Console.log (Diag (4, 3));

You may notice that this strange syntax {square, diag} is not the destructing that was mentioned earlier. So you'd think you could write it like this:

Import Lib from ' Lib ';
 Square = Lib.square;

But in fact this is wrong, because import {square, diag} from ' Lib '; Is the import of the unique syntax, not destructing syntax, so in fact, the import is not directly the entire module in the form of objects introduced.

If you want to be able to write in the form of lib.square, you should import it like this:

Import * As Lib from ' Lib ';
 Square = Lib.square;

However, it is important to note that if you compile directly with Babel, execution will be an error. Because Babel does not fully compile modules, he just compiles ES6 's modules syntax into the syntax of CMD, so it needs to be compiled again with tools like browserify.
If you find Browserify can't find lib, you can change it to from './lib ' try. Default Export

You will find that the above wording is troublesome, because you must specify a name. In fact, many times a module only exports a variable, there is no need to specify a name.
Another usage is called the default export, which is to specify a variable to export as the default value:

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

------main1.js------
import myFunc from ' MyFunc ';
MyFunc ();

The default export does not need to specify a variable name, it is the file name by default.
The difference here is not just not to write the name, but the default value of the export is the module itself, not a property under the module, that is, the import myFunc from ' MyFunc '; Instead of import {MyFunc} from ' MyFunc '; named export combined with default export

The default export can also be used in conjunction with named exports:

Export default function (obj) {
    ...
};
Export function each (obj, iterator, context) {
    ...
}
Export {each as ForEach};

The above code exports a default function, which is then exported by two named functions, which we can import:

Import _, {each} from ' underscore ';

Note This comma syntax, which splits the default export and named exports

In fact, this default export is just a special name of default, you can also directly use his name, it as a named export to use, the following two kinds of wording is equivalent:

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

Similarly, you can do the default export by displaying the specified default name, and the following two types of notation are the same:

------module1.js------
export default 123;

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

support for static import export only

The ES6 specification only supports static import and export, that is, it must be determined at compile time to be determined at runtime, such as the following code is wrong:

Dynamic import of
var mylib;
if (Math.random ()) {
    Mylib = require (' foo ');
} else {
    mylib = require (' bar ');
}
Dynamically export
if (Math.random ()) {
    Exports.baz = ...;
}

Why do this, mainly two points: performance, in the compilation phase that completes all the module import, if at run time will reduce the speed of better check errors, such as the variable type check various import and Export methods summary

To summarize, ES6 provides the following types of imports:

Default exports and named exports
import Thedefault, {named1, named2} from ' Src/mylib ';
Import thedefault from ' Src/mylib ';
Import {named1, named2} from ' Src/mylib ';

Renaming:import named1 as myNamed1
import {named1 as myNamed1, named2} from ' Src/mylib ';

Importing the module as an object
//(with one property per named export),
Import * as Mylib from ' src/mylib '; 
  //only load the module, don ' t import anything
import ' src/mylib ';

Here are several ways to export:

Named Export
myVar1 var = ...;
Export Let MyVar2 = ...;
Export Const MY_CONST = ...;

Export function MyFunc () {
    ...
}
Export function* Mygeneratorfunc () {
    ...
}
Export class MyClass {
    ...
}
Default export to
default 123;
Export default function (x) {
    return x
};
Export default x = x;
Export Default class {
    constructor (x, y) {
        this.x = x;
        This.y = y;
    }
};
You can also list all the exported content by itself
const MY_CONST = ...;
function MyFunc () {
    ...
}

Export {my_const, myFunc};
Or give them a name at the time of export. Export
{My_const as The_const, myFunc as Thefunc};

You can also export modules imported from other places export
* from ' src/other_module ';
Export {foo, bar} from ' Src/other_module ';
Export {foo as Myfoo, bar} from ' Src/other_module ';

Note:
Main reference this article: http://www.2ality.com/2014/09/es6-modules-final.html