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
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/06/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
