ES6详解八：模块（Module）！--各类导入导出方法

[-]

1. 基本用法
1. 命名导出named exports
2. 默认导出
3. 命名导出结合默认导出
4. 仅支持静态导入导出
5. 各类导入和导出方式总结

 

modules是ES6引入的最重要一个特性。 
因此之后再写模块，直接按照ES6的modules语法来写，而后用 babel + browserify 来打包就好了。

modules规范分两部分，一部分是如何导出，一部分是如何导入。

基本用法

命名导出(named exports)

能够直接在任何变量或者函数前面加上一个 export 关键字，就能够将它导出。 
这种写法很是简洁，和平时几乎没有区别，惟一的区别就是在须要导出的地方加上一个 export 关键字。 
好比：

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

而后在另外一个文件中这样引用：

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));

你可能会注意到这个奇怪的语法 { square, diag } 不就是前面讲过的 destructing吗。因此你会觉得还能够这样写：

import lib from 'lib';
 square = lib.square;

可是其实这样是错的，由于 import { square, diag } from 'lib’; 是import的特有语法，并非 destructing 语法，因此其实import的时候并非直接把整个模块以对象的形式引入的。

若是你但愿能经过 lib.square 的形式来写，你应该这样导入：

import * as lib from 'lib';
 square = lib.square;

不过值得注意的一点是，若是你直接用babel编译，执行是会报错的。由于 babel 并不会彻底编译 modules，他只是把 ES6 的modules语法编译成了 CMD 的语法，因此还须要用 browserify 之类的工具再次编译一遍。 
若是你发现 browserify 找不到 lib，能够改为 from ‘./lib’ 试试。

默认导出

你们会发现上面的写法比较麻烦，由于必需要指定一个名字。其实不少时候一个模块只导出了一个变量，根本不必指定一个名字。 
还有一种用法叫默认导出，就是指定一个变量做为默认值导出：

//------ myFunc.js ------
export default function () { ... };

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

默认导出的时候不须要指定一个变量名，它默认就是文件名。 
这里的区别不只仅是不用写名字，而是 导出的默认值就是模块自己，而不是模块下面的一个属性，便是 import myFunc from 'myFunc’; 而不是 import {myFunc} from 'myFunc’;

命名导出结合默认导出

默认导出一样能够结合命名导出来使用：

export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

上面的代码导出了一个默认的函数，而后由导出了两个命名函数，咱们能够这样导入：

import _, { each } from 'underscore';

注意这个逗号语法，分割了默认导出和命名导出

其实这个默认导出只是一个特殊的名字叫 default，你也能够就直接用他的名字，把它当作命名导出来用，下面两种写法是等价的：

import { default as foo } from 'lib';
import foo from 'lib';

一样的，你也能够经过显示指定 default 名字来作默认导出, 下面两种写法是同样的：

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

//------ module2.js ------
const D = 123;
export { D as default };

仅支持静态导入导出

ES6规范只支持静态的导入和导出，也就是必需要在编译时就能肯定，在运行时才能肯定的是不行的，好比下面的代码就是不对的：

//动态导入
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}
//动态导出
if (Math.random()) {
    exports.baz = ...;
}

为何要这么作，主要是两点：

1. 性能，在编译阶段即完成全部模块导入，若是在运行时进行会下降速度
2. 更好的检查错误，好比对变量类型进行检查

各类导入和导出方式总结

总结一下，ES6提供了以下几种导入方式：

// 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';

以下几种导出方式：

//命名导出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;

export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
export class MyClass {
    ...
}
// default 导出
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;
    }
};
//也能够本身列出全部导出内容
const MY_CONST = ...;
function myFunc() {
    ...
}

export { MY_CONST, myFunc };
//或者在导出的时候给他们改个名字
export { MY_CONST as THE_CONST, myFunc as theFunc };

//还能够导出从其余地方导入的模块
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';

注： 
主要参考这篇文章：http://www.2ality.com/2014/09/es6-modules-final.html