1. 简介
ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
2. 导入导出
不同的导出方式对应不同的导入方式。导出可以分为两种:名字导出,default导出。
2.1名字导出
函数,变量均可以导出。
例1:有选择的import
math.js
代码语言:javascript复制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
代码语言:javascript复制import {add, MIN} from './math.js';
console.log(MIN);
console.log(add(1,2));
使用rollup进行组装测试(组装的方式很多,rollup只是其中一种,关于rollup的简单使用,可以猛击这里)
代码语言:javascript复制rollup entry.js -f cjs -o index.js
得到index.js如下:
代码语言:javascript复制'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如下
代码语言:javascript复制import * as mathlib from './math.js';
console.log(mathlib.MIN);
console.log(mathlib.add(1, 2));
rollup组装后的代码与例1完全一致。
例3:改名导出
math.js
代码语言:javascript复制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
代码语言:javascript复制import {myadd,mymax} from './math.js';
console.log(myadd(1,2));
console.log(mymax);
2.2 default导出
- defalut可以导出匿名函数, 当然也可以导出变量和函数。
- 一个模块只能有一个default导出。
- defalut的导出,可以使用任何名字import,不需要对应。
例
math.js
代码语言:javascript复制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
代码语言:javascript复制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