ES6-模塊導入導出

基本用法

命名導出(named exports)

可以直接在任何變量或者函數前面加上一個 export 關鍵字，就可以將它導出。

例如：

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

然后在另一個文件中這樣引用：

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

但下面這種寫法是錯誤的：

import lib from 'lib';
 square = lib.square;

因為

import {square, dialog} from 'lib' ;

 是import的特有語法，其實import的時候並不是直接把整個模塊以對象的形式引入的。

如果你希望能通過 lib.square 的形式來寫，你應該這樣導入：

import * as lib from 'lib';
 square = lib.square;

不過值得注意的一點是，如果你直接用babel編譯，執行是會報錯的。因為 babel 並不會完全編譯 modules，他只是把 ES6 的modules語法編譯成了 CMD 的語法，所以還需要用 browserify 之類的工具再次編譯一遍。 
如果你發現 browserify 找不到 lib，可以改成 from ‘./lib’ 試試。

默認導出(default exports)

上面的寫法需要指定一個名字。其實很多時候一個模塊只導出一個變量，根本沒必要指定一個名字。

還有一種用法叫默認導出，就是指定一個變量作為默認值導出：

/*------ myFunc.js ------*/
export default function () { ... };

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

默認導出的時候不需要指定一個變量名，它默認就是文件名。

這里的區別不僅僅是不用寫名字，而是導出的默認值就是模塊本身，而不是模塊下面的一個屬性，即是 import myFunc from 'myFunc'; 而不是 import {myFunc} from 'myFunc';

命名導出結合默認導出

export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

上面的代碼導出了一個默認的函數，然后由導出了兩個命名函數，我們可以這樣導入：

 import _, { each } from 'underscore';

注意這個逗號語法，分割了默認導出和命名導出

其實這個默認導出只是一個特殊的名字叫default , 你也可以直接用他的名字，把它當做命名導出來用，下面兩種寫法是等價的：

import { default as foo } from 'lib';
import foo from 'lib';

同樣的，你也可以通過顯示指定 default 名字來做默認導出, 下面兩種寫法是一樣的：

//------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

ES6僅支持靜態導入導出

ES6規范只支持靜態的導入和導出，也就是必須要在編譯時就能確定，在運行時才能確定的是不行的，下面的代碼就是不對的：

//動態導入
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}

//動態導出
if (Math.random()) {
    exports.baz = ...;
}

為什么要這么做，主要是兩點：

1. 性能，在編譯階段即完成所有模塊導入，如果在運行時進行會降低速度

2.更好的檢查錯誤，比如對變量類型進行檢查；

 

轉自：http://blog.csdn.net/lihongxun945/article/details/49031383