ES6規範import和export用法總結

JavaScript模組規範
在任何一個大型應用中模組化是很常見的，與一些更傳統的程式語言不同的是，JavaScript6之前還不支援原生的模組化;Javascript社群做了很多努力，在現有的執行環境中，實現”模組”的效果。通行的JavaScript模組規範主要有兩種：CommonJS、AMD

---

CommonJS規範是伺服器端Javascript模組規範(同步)
Node.js的模組系統，就是參照CommonJS規範實現的。NPM也遵循了commonJS定義的包規範，從而形成了一套完整的生態系統

---

AMD意思是”非同步模組定義”，是前端模組規範
RequireJS就是實現了AMD規範的

CommonJS module以伺服器端為第一的原則發展，選擇同步載入模組。它的模組是無需包裝的,但它僅支援物件型別（objects）模組
AMD以瀏覽器為第一的原則發展，選擇非同步載入模組。它的模組支援物件、函式、構造器、字串、JSON等各種型別的模組,因此在瀏覽器中它非常靈活

ES6模組的import和export用法總結
ES6之前已經出現了js模組載入的方案，最主要的是
commonjs 伺服器 同步載入 如nodejs
AMD 瀏覽器 非同步載入 如requirejs

ES6在語言規格的層面上，實現了模組功能，而且實現得相當簡單
完全可以取代現有規範，成為瀏覽器和伺服器通用的模組解決方案

執行時載入
CommonJS模組是物件，實質是整體載入模組（即載入fs的所有方法），生成一個物件，然後再從這個物件上面讀取其中3個方法這種載入稱為“執行時載入”，因為只有執行時才能得到這個物件

編譯時載入
ES6模組不是物件，是通過export命令顯式指定輸出的程式碼，再通過import命令輸入
的實質是從fs模組載入3個方法，其他方法不載入。這種載入稱為“編譯時載入”或者靜態載入，即ES6可以在編譯時確定模組的依賴關係，以及輸入和輸出的變數，效率更高

ES6模組主要有兩個功能：export和import
export用於對外輸出本模組（一個檔案可以理解為一個模組）變數的介面
import用於在一個模組中載入另一個含有export介面的模組。
也就是說使用export命令定義了模組的對外介面以後，其他JS檔案就可以通過import命令載入這個模組（檔案）。如下圖(假設a和b檔案在同一目錄下)
// a.js
var sex=”boy”;
var echo=function(value){
　　console.log(value)
}
export {sex,echo}
//通過向大括號中新增sex，echo變數並且export輸出，就可以將對應變數值以sex、echo變數識別符號形式暴露給其他檔案而被讀取到
1.export {sex,echo}

1. [不用] export default命令，為模組指定預設輸出 其實只是輸出一個叫做default的變數
   (1)[只能預設輸出單個，不能是物件]
   var abc=function(){}

       export default abc
   

import xx from `./a.js`
xx()

(2)如果想在一條import語句中，同時輸入預設方法和其他介面

      var abc=function(){}
      var cba=function(){}

var bac=function(){}

          export default abc
          export {cba}

import xx,{cba,bac} from `./a.js`
xx() cba() bac()

// b.js
通過import獲取a.js檔案的內部變數，{}括號內的變數來自於a.js檔案export出的變數識別符號。
import {sex,echo} from “./a.js”
console.log(sex) // boy
echo(sex) // boy
1.import命令接受一對大括號，裡面指定要從其他模組匯入的變數名
大括號裡面的變數名，必須與被匯入模組（profile.js）對外介面的名稱相同
import {sex,echo} from “./a.js”

2.除了指定載入某個輸出值，還可以使用整體載入，即用星號（*）指定一個物件，所有輸出值都載入在這個物件上面
import * as xx from `./circle`;
console.log(`圓面積：` + xx.area(4));

以上是export與import的基本用法，再進行擴充學習
前面的例子可以看出，b.js使用import命令的時候，使用者需要知道a.js所暴露出的變數識別符號
使用export default命令，為模組指定預設輸出，這樣就不需要知道所要載入模組的變數名

//a.js
var sex=”boy”;
export default sex（sex不能加大括號）
//一個檔案內最多隻能有一個export default
其實此處相當於為sex變數值”boy”起了一個系統預設的變數名default，自然default只能有一個值

// b.js
本質上，a.js檔案的export default輸出一個叫做default的變數，然後系統允許你為它取任意名字。所以可以為import的模組起任何變數名，且不需要用大括號包含
import any from “./a.js”
import any12 from “./a.js”
console.log(any,any12) // boy,boy

import和export這兩個命令現在在任何瀏覽器中都是不支援的, 同時babel也無法將其轉換為瀏覽器支援的ES5, 原因在於:
babel只是個翻譯，假設a.js 裡 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，並不會把b.js的內容給讀取合併進來, 如果想在最終的某一個js裡包含 a.js，b.js 的程式碼，那就需要用到打包工具

所以我在這裡講解一下如何使用webpack工具將帶有import和export語法的JS檔案, 通過打包工具生成所有瀏覽器都支援的單個JS檔案