「ES6」import,export总结

Posted on

写插件写得有点累，总结篇文章休息一下

模块化规范目前应该是commonJS和ES6 module两种规范使用得比较多，
Node中采用的食commonJS(当然很多时候都可以混着用)，而前端的话普遍用ES6 module了。

全栈做得多了，两种规范常常脑短路混淆，看着method undefined相当蛋疼，这里整理一下。

两种模式常用法比较

commonJS

1
2
3
4
5
6
7
8
9
10
11
12
//---- lib.js ----
function add (x, y) {
    return x + y
}

module.exports = {
    add
}

//---- main.js ----
const add = require('./lib').add
console.log(add(1, 2))

ES6 module

1
2
3
4
5
6
7
8
//---- lib.js ----
export function add (x, y) {
    return x + y
}

//---- main.js ----
import { add } from './lib'
console.log(add(x, y))

参考文章

模块化导出的话大致可以分为以下四种：

  1. 命名导出 (一个模块多个导出)
  2. 默认导出 (一个模块一个导出)
  3. 混合命名和默认导出
  4. 循环依赖

命名导出

1
2
3
4
5
6
7
8
9
10
11
12
13
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

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

或者

1
2
3
4
//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

默认导出

1
2
3
4
5
6
//------ myFunc.js ------
export default function () { ... };

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

混合命名和默认导出

1
2
3
4
5
6
7
8
9
10
11
12
//------ underscore.js ------
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

//------ main.js ------
import _, { each } from 'underscore';
...

循环依赖

1
2
3
4
5
6
7
8
9
10
// lib.js
import Main from 'main';
var lib = {message: "This Is A Lib"};
export { lib as Lib };

// main.js
import { Lib } from 'lib';
export default class Main { 
  // ....
}

参考

http://2ality.com/2014/09/es6-modules-final.html

https://gist.github.com/vasco3/22b09ef0ca5e0f8c5996#modules