在ES5中我們要進行模組華操作需要引入第三方類庫，隨著前後端分離，前端的業務日漸複雜，ES6為我們增加了模組話操作。模組化操作主要包括兩個方面。

• export ：負責進行模組化，也是模組的輸出。
• import：負責八模組引入，也是模組的引入操作。

export的用法

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

export var a = 'jspang';

然後可以在同級目錄下的 index.js 中以 import 的形式引入。

import {a} from './temp.js';

console.log(a);

這就是一個最簡單的模組的輸出和引入。

多變數的輸出

這裡聲明瞭3個變數，需要把這3個變數都進行模組化輸出，這時候我們給他們包裝成物件就可以了。

var a ='jspang';
var b ='技術胖';
var c = 'web';

export {a,b,c}

函式的模組化輸出

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

as 的用法

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

var a ='jspang';
var b ='技術胖';
var c = 'web';

export {
    x as a,
    y as b,
    z as c
}

export default 的使用

加上default相當是一個預設的入口。在一個檔案裡export default只能有一個。我們來對比一下export和export default的區別

1、export

export var a ='jspang';

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

對應的引入方式

mport {a,add
 
} form './temp';//也可以分開寫

2、export defalut

export default var a='jspang';

對應的引入方式

import str from './temp';

ES6的模組化不能直接在瀏覽器中預覽，必須要使用Babel進行編譯之後正常看到結果。