ES6的模組化操作主要包括兩個方面。

（1）export :負責進行模組化，也是模組的輸出。

（2）import : 負責把模組引，也是模組的引入操作。

export的用法：

export可以讓我們把變數，函式，物件進行模組化，提供外部呼叫介面，讓外部進行引用。先來看個最簡單的例子，把一個變數模組化。我們新建一個demo.js檔案，然後在檔案中輸出一個模組變數。

export var a = '單個變數匯出';

然後可以在index.js中以import的形式引入。

import {a} from './temp.js';
console.log(a);

最後在控制檯輸入 babel-node index.js

目前我的index.js在src目錄下，所以是在該目錄執行上述指令的。如圖：

2.多變數的輸出

先要宣告變數，需要把變數都進行模組化輸出，這時候我們給他們包裝成物件就可以了。

demo.js中：

var a ='i';
var b ='love';
var c = 'you';
export {a,b,c}

index.js中：

import {a,b,c} from './demo.js';
console.log(a,b,c);

執行指令後結果為：

3.函式的模組化輸出

在demo.js中定義一個函式，並使用export進行輸出。

export function add(a,b){
    return a+b;
}

index.js中：

import {add} from './demo.js';
console.log(add(1,2));

結果為：

5.as的用法

有些時候我們並不想暴露模組裡邊的變數名稱，而給模組起一個更語義話的名稱，這時候我們就可以使用as來操作。

demo.js中：

var a ='i';
var b ='love';
var c = 'you';
export {
    a as x,
    b as  y,
    c as z
}

index.js中：

import {x,y,z} from './demo.js';
console.log(x,y,z);

輸出結果為：

6.export default的使用

加上default相當是一個預設的入口。在一個檔案裡export default只能有一個。

export default 和 export 區別：

（1）export

輸出格式：

export var a = '單個變數匯出';

對應匯入格式：使用花括號

import {a} from './temp.js';
console.log(a);

（2）export defalut

export default var a='預設單個變數輸出;

對應匯入格式：

import a from './temp';
console.log(a)//預設單個變數輸出

總結：export default 和 export 區別為

（1）通過export方式匯出，在匯入時要加{ }，export default則不需要。

（2）使用export default命令，為模組指定預設輸出，這樣就不需要知道所要載入模組的變數名，而export命令需要知道相應的模組的變數名。

（3）export與export default均可用於匯出常量、函式、檔案、模組等

（4）在其它檔案或模組中通過import+(常量 | 函式 | 檔案 | 模組)名的方式，將其匯入，以便能夠對其進行使用。

over....