想知道es6的導入導出嗎？來，我來告訴你~

<center>es6的導入導出

咱們今天來說講es6的導入導出，es6的導入導出是什麼呢？它有哪些方便之處呢？其實啊，如今的ES6自帶了模塊化，咱們能夠直接做用import和export在瀏覽器中導入和導出各個模塊了， 一個js文件表明一個js模塊；首先咱們來具體瞭解瞭解es6模塊化：

ES6的模塊化的基本規則或特色：

1. 每個模塊只加載一次， 每個JS只執行一次， 若是下次再去加載同目錄下同文件，直接從內存中讀取。 一個模塊就是一個單例，或者說就是一個對象；
2. 每個模塊內聲明的變量都是局部變量， 不會污染全局做用域；
3. 模塊內部的變量或者函數能夠經過export導出；
4. 一個模塊能夠導入別的模塊
5. 使用export關鍵詞導出對象。這個關鍵字能夠無限次使用；
6. 使用import關鍵字將其它模塊導入某一模塊中。它可用來導入任意數量的模塊；
7. 支持模塊的異步加載；
8. 爲加載模塊提供編程支持。

ES6模塊主要有兩個功能：export和import
export用於對外輸出本模塊變量的接口
import用於在一個模塊中加載另外一個含有export接口的模塊。
也就是說使用export命令定義了模塊的對外接口之後，其餘JS文件就能夠經過import命令加載這個模塊
一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。下面是一個JS文件，裏面使用export命令輸出變量：
/Pb.js
//導出常量
export const sqrt = Math.sqrt;
//導出函數
`export function square(x) {

return x * x;

}`
//導出函數
`export function diag(x, y) {

return sqrt(square(x) + square(y));

}`

//main.js
import { square, diag } from '.Pb';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

這個例子意思就是在lib.js文件中， 使用 export{接口} 導出接口， 大括號中的接口名字爲上面定義的變量，直接在export的地方定義導出的函數，或者變量。

若是想爲輸入的變量從新取一個名字，import命令要使用as關鍵字，將輸入的變量重命名。
import { lastName as surname } from '.Pb';

import命令具備提高效果，會提高到整個模塊的頭部，首先執行。
foo();
import { foo } from 'my_module';

還有一種導出方法： 默認導出
這種導出的方式不須要知道變量的名字， 至關因而匿名的， 直接把開發的接口給export；
若是一個js模塊文件就只有一個功能， 那麼就可使用export default導出；

import實際都作了些什麼？

ES6將模塊加載過程的細節徹底交由最終的實現來定義，模塊執行的其它部分卻是在規範中有詳細定義。當你通知JS引擎運行一個模塊時，它必定會按照如下四個步驟執行下去：

1. 語法解析：閱讀模塊源代碼，檢查語法錯誤。
2. 加載：遞歸地加載全部被導入的模塊。這也正是沒被標準化的部分。
3. 鏈接：每遇到一個新加載的模塊，爲其建立做用域並將模塊內聲明的全部綁定填充到該做用域中，其中包括由其它模塊導入的內容。
4. 若是你的代碼中有import {cake} from "paleo"這樣的語句，而此時「paleo」模塊並無導出任何「cake」，你就會觸發一個錯誤。這實在是太糟糕了，你都快要運行模塊中的代碼了，都是cake惹的禍！
5. 運行時：最終，在每個新加載的模塊體內執行全部語句。此時，導入的過程就已經結束了，因此當執行到達有一行import聲明的代碼的時候……什麼都沒發生！

靜態vs動態：論規則及破例之法

JavaScript做爲一門動態語言已經獲得了一個使人驚訝的靜態模塊系統。

1. 你只能夠在模塊的最外層做用域使用import和export，不可在條件語句中使用，也不能在函數做用域中使用import。
2. 全部導出的標識符必定要在源代碼中明確地導出它們的名稱，你不能經過編寫代碼遍歷一個數組而後用數據驅動的方式導出一堆名稱。
3. 模塊對象被凍結了，因此你沒法hack模塊對象併爲其添加polyfill風格的新特性。
4. 一個模塊的全部依賴必須在模塊代碼運行前徹底加載、解析而且及早鏈接，不存在一種經過import來按需懶加載的語法。
5. import模塊產生的錯誤沒有錯誤恢復機制。一個app可能囊括了上百個模塊，一旦有一個模塊沒法加載或鏈接，全部的模塊都不會運行，並且你不能在try/catch代碼塊中捕捉import的錯誤信息。（上面這些描述的本意是說：系統是靜態的，webpack可在編譯時爲你檢測那些錯誤。）
6. 不支持在模塊加載依賴前運行其它代碼的鉤子，這也意味着沒法控制模塊的依賴加載過程。

如今咱們用編輯器編寫es6瀏覽器不支持，能夠轉譯成es5再用node實現效果

var gulp=require("gulp");
var watch=require("gulp-watch");
var babel=require("gulp-babel");
gulp.task("babel",function(){
   gulp.src("./js/*.js")
   .pipe(babel({
       presets:["es2015"]
   }))
   .pipe(gulp.dest("./dist/js"));
});
gulp.task("watch",function(){
gulp.watch("./js/*.js",["babel"]);
})