ES6中的export与import入门

1. 简介

ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

2. 导入导出

不同的导出方式对应不同的导入方式。导出可以分为两种：名字导出，default导出。

2.1名字导出

函数，变量均可以导出。

例1:有选择的import

math.js

function add(a, b){
    return a+b;
}

function sub(a, b){
    return a-b;
}

const MAX = 10000;
const MIN = 0;

export{add, sub, MAX, MIN};

entry.js

import {add, MIN} from './math.js';

console.log(MIN);
console.log(add(1,2));

使用rollup进行组装测试（组装的方式很多，rollup只是其中一种，关于rollup的简单使用，可以猛击这里）

rollup entry.js -f cjs -o index.js

得到index.js如下：

'use strict';

function add(a, b){
    return a+b;
}
const MIN = 0;

console.log(MIN);
console.log(add(1, 2));

例2: 整体（* as）导出

math.js同例1.

entyr.js如下

import * as mathlib from './math.js';

console.log(mathlib.MIN);
console.log(mathlib.add(1, 2));

rollup组装后的代码与例1完全一致。

例3:改名导出

math.js

function add(a, b){
    return a+b;
}

function sub(a, b){
    return a-b;
}

const MAX = 10000;
const MIN = 0;

export {
    add as myadd,
    MAX as mymax
};

entry.js

import {myadd,mymax} from './math.js';

console.log(myadd(1,2));
console.log(mymax);

2.2 default导出

• defalut可以导出匿名函数, 当然也可以导出变量和函数。
• 一个模块只能有一个default导出。
• defalut的导出，可以使用任何名字import，不需要对应。

例

math.js

function add(a, b){
    return a+b;
}

function sub(a, b){
    return a-b;
}

const MAX = 10000;
const MIN = 0;

export default function madd(a,b,c){
    return a+b+c;
}

export {add, sub};

entry.js

import k,{add,sub} from './math.js';

console.log(k(1,2,3));
console.log(add(1, 2));

3. 参考

http://es6.ruanyifeng.com/?search=export&x=6&y=5#docs/module