modules是ES6引入的最重要一個(gè)特性。 所以以后再寫模塊，直接按照ES6的modules語(yǔ)法來(lái)寫，然后用 babel + browserify 來(lái)打包就行了。modules規(guī)范分兩部分，一部分是如何導(dǎo)出，一部分是如何導(dǎo)入。
基本用法
命名導(dǎo)出(named exports)
可以直接在任何變量或者函數(shù)前面加上一個(gè) export 關(guān)鍵字，就可以將它導(dǎo)出。 這種寫法非常簡(jiǎn)潔，和平時(shí)幾乎沒(méi)有區(qū)別，唯一的區(qū)別就是在需要導(dǎo)出的地方加上一個(gè) export 關(guān)鍵字。 比如：
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
然后在另一個(gè)文件中這樣引用：
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
你可能會(huì)注意到這個(gè)奇怪的語(yǔ)法 { square, diag } 不就是前面講過(guò)的 destructing嗎。所以你會(huì)以為還可以這樣寫：
import lib from 'lib';
square = lib.square;
但是其實(shí)這樣是錯(cuò)的，因?yàn)?import { square, diag } from 'lib’; 是import的特有語(yǔ)法，并不是 destructing 語(yǔ)法，所以其實(shí)import的時(shí)候并不是直接把整個(gè)模塊以對(duì)象的形式引入的。如果你希望能通過(guò) lib.square 的形式來(lái)寫，你應(yīng)該這樣導(dǎo)入：
import * as lib from 'lib';
square = lib.square;
不過(guò)值得注意的一點(diǎn)是，如果你直接用babel編譯，執(zhí)行是會(huì)報(bào)錯(cuò)的。因?yàn)?babel 并不會(huì)完全編譯 modules，他只是把 ES6 的modules語(yǔ)法編譯成了 CMD 的語(yǔ)法，所以還需要用 browserify 之類的工具再次編譯一遍。 如果你發(fā)現(xiàn) browserify 找不到 lib
，可以改成 from ‘./lib’ 試試。
默認(rèn)導(dǎo)出
大家會(huì)發(fā)現(xiàn)上面的寫法比較麻煩，因?yàn)楸仨氁付ㄒ粋€(gè)名字。其實(shí)很多時(shí)候一個(gè)模塊只導(dǎo)出了一個(gè)變量，根本沒(méi)必要指定一個(gè)名字。 還有一種用法叫默認(rèn)導(dǎo)出，就是指定一個(gè)變量作為默認(rèn)值導(dǎo)出：
//------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
默認(rèn)導(dǎo)出的時(shí)候不需要指定一個(gè)變量名，它默認(rèn)就是文件名。 這里的區(qū)別不僅僅是不用寫名字，而是 導(dǎo)出的默認(rèn)值就是模塊本身，而不是模塊下面的一個(gè)屬性，即是 import myFunc from 'myFunc’; 而不是import {myFunc} from 'myFunc’;
命名導(dǎo)出結(jié)合默認(rèn)導(dǎo)出
默認(rèn)導(dǎo)出同樣可以結(jié)合命名導(dǎo)出來(lái)使用：
export default function (obj) { ...};
export function each(obj, iterator, context) { ...}
export { each as forEach };
上面的代碼導(dǎo)出了一個(gè)默認(rèn)的函數(shù)，然后由導(dǎo)出了兩個(gè)命名函數(shù)，我們可以這樣導(dǎo)入：
import _, { each } from 'underscore';
注意這個(gè)逗號(hào)語(yǔ)法，分割了默認(rèn)導(dǎo)出和命名導(dǎo)出
其實(shí)這個(gè)默認(rèn)導(dǎo)出只是一個(gè)特殊的名字叫 default，你也可以就直接用他的名字，把它當(dāng)做命名導(dǎo)出來(lái)用，下面兩種寫法是等價(jià)的：
import { default as foo } from 'lib';import foo from 'lib';
同樣的，你也可以通過(guò)顯示指定 default
名字來(lái)做默認(rèn)導(dǎo)出, 下面兩種寫法是一樣的：
//------ module1.js ------
export default 123;
//------ module2.js ------
const D = 123;
export { D as default };
僅支持靜態(tài)導(dǎo)入導(dǎo)出
ES6規(guī)范只支持靜態(tài)的導(dǎo)入和導(dǎo)出，也就是必須要在編譯時(shí)就能確定，在運(yùn)行時(shí)才能確定的是不行的，比如下面的代碼就是不對(duì)的：
//動(dòng)態(tài)導(dǎo)入
var mylib;
if (Math.random()) {
mylib = require('foo');
} else {
mylib = require('bar');
}
//動(dòng)態(tài)導(dǎo)出
if (Math.random()) {
exports.baz = ...;
}
為什么要這么做，主要是兩點(diǎn)：
- 性能，在編譯階段即完成所有模塊導(dǎo)入，如果在運(yùn)行時(shí)進(jìn)行會(huì)降低速度
- 更好的檢查錯(cuò)誤，比如對(duì)變量類型進(jìn)行檢查
各種導(dǎo)入和導(dǎo)出方式總結(jié)
總結(jié)一下，ES6提供了如下幾種導(dǎo)入方式：
// Default exports and named exports
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';
// Renaming:
import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';
// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';
// Only load the module, don’t import anything
import 'src/mylib';
如下幾種導(dǎo)出方式：
//命名導(dǎo)出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;
export function myFunc() { ...}
export function* myGeneratorFunc() { ...}
export class MyClass { ...}
// default 導(dǎo)出
export default 123;
export default function (x) { return x};
export default x => x;
export default class {
constructor(x, y) { this.x = x; this.y = y; }
};
//也可以自己列出所有導(dǎo)出內(nèi)容
const MY_CONST = ...;
function myFunc() { ...}
export { MY_CONST, myFunc };
//或者在導(dǎo)出的時(shí)候給他們改個(gè)名字
export { MY_CONST as THE_CONST, myFunc as theFunc };
//還可以導(dǎo)出從其他地方導(dǎo)入的模塊
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';
