ES6 module 模組化匯入匯出的幾種方式

export const sqrt =math.sqrt;

export 
function
square(x) 
export 
function
diag(x, y)

然後在另乙個檔案中這樣引用：

import  from 'lib';

console.log(square(11)); //
121console.log(diag(4, 3));

或者：

import * as lib from 'lib';

square = lib.square;

不過值得注意的一點是，如果你直接用babel編譯，執行是會報錯的。因為 babel 並不會完全編譯 modules，他只是把 es6 的modules語法編譯成了 cmd 的語法，所以還需要用 browserify 之類的工具再次編譯一遍。 

如果你發現 browserify 找不到lib，可以改成from 『./lib』試試。

//

------ myfunc.js ------
export default
function
() ;
//------ main1.js ------
import myfunc from 'myfunc';
myfunc();

預設匯出同樣可以結合命名匯出來使用：

export default

function
(obj) ;
export 
function
each(obj, iterator, context) 
export ;

上面的**匯出了乙個預設的函式，然後由匯出了兩個命名函式，我們可以這樣匯入：

import _,  from 'underscore';

注意這個逗號語法，分割了預設匯出和命名匯出

其實這個預設匯出只是乙個特殊的名字叫 default，你也可以就直接用他的名字，把它當做命名匯出來用，下面兩種寫法是等價的：

import  from 'lib';

import foo from 'lib';

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

//

------ module1.js ------
export default 123;
//------ module2.js ------
const d = 123;
export ;

es6規範只支援靜態的匯入和匯出，也就是必須要在編譯時就能確定，在執行時才能確定的是不行的，比如下面的**就是不對的：

//動態匯入

var mylib;
if (math.random()) else 
//動態匯出
if (math.random())

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

效能，在編譯階段即完成所有模組匯入，如果在執行時進行會降低速度

更好的檢查錯誤，比如對變數型別進行檢查

在webpack 可以配置別名匯入 ，在webpack匯入資料夾時會在資料夾中找到index.js檔案匯入。

index.js 檔案的一般寫法：

const files = require.context('

.', true, /\.js/)
const modules ={}
files.keys().foreach((key) =>
modules[key.replace(/(^\.\/|\.js$)/g, '')] = files(key).default
})export 
default modules

總結一下，es6提供了如下幾種匯入方式：

//

default exports and named exports
import thedefault, from 'src/mylib';
import thedefault from 'src/mylib';
import from 'src/mylib';
//renaming: import named1 as mynamed1
import 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';

如下幾種匯出方式：

//

命名匯出
export var myvar1 =...;
export let myvar2 =...;
export const my_const =...;
export 
function
myfunc() 
export 
function*mygeneratorfunc() 
export class myclass 
//default 匯出
export default 123;
export 
default
function
(x) ;
export 
default x =>x;
export 
default
class 
};//
也可以自己列出所有匯出內容
const my_const =...;
function
myfunc() 
export ;
//或者在匯出的時候給他們改個名字
export ;
//還可以匯出從其他地方匯入的模組
export * from 'src/other_module';
export from 'src/other_module';
export from 'src/other_module';

refer from: 

ES6系列 Module 模組化

一 匯入匯出變數 匯出變數 export const name hello 匯出變數 export let addr beijing export var list 1,2,3 匯入變數 import from js mod 匯出變數 const name hello let addr beijin...

學習記錄 ES6 module

export 和 import 簡單的例子 a.js export const a i am a index.js import from a.js console.log a i am a export import 嚴格模式 export 的具體使用方式，以及 import 的具體使用方式 de...

ES6 Module 多種用法

使用者需要知道所要載入的變數名或函式名，否則無法載入 export const a 1export const b 1 等價於 const a 1const b 1export export 等價於 const a 1const b 1export import from const a 1cons...