ES6中的export与import入门

2020-12-07 14:34:28 浏览数 (1)

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

0 人点赞