模組化 (1) - Export / Import

前言

這次來談談「模組化」，這邊有兩個小故事可以參考。

1. 使用 Vue-cli 或 Webpack 建立好專案後，常常使用一些套件就需要用到 import ，但也就是一直照用沒有去了解過。
2. 寫 Node 時很常把所有 code 都寫在一隻檔案裡，於是被罵了沒節操（哭

如果你也是沒節操的那位，就一起來了解下怎麼模組化吧（被揍

本篇專注於使用 import / export ，下一篇會寫 Node 常見的 CommonJS。

目錄

• import / export 模組化介紹
• named export / export default
  - named export
  - export default
  - 並用

import / export 模組化介紹

這其實是在 ES6 才被官方訂出來的一套模組化標準，在標準出來前就像是各方雲集，而較有名的是 CommonJS 與 AMD，有興趣了解歷史淵源的話可以參考延伸閱讀。

在使用 import / export 模組化後會自動變成 嚴格模式 ( strict-mode )，詳細請參考此處。

named export / export default

先有匯出再引入，平時可能會常看到 export 與 export default 。這兩個主要差別在於一隻檔案裡只能有一個 default ，而 export 可以有很多個。

在帶入 export 的同時會一起講 import 。

named export

中文為具名匯出，在一個檔案裡可以有多個 named export 匯出任何變數、函式、物件等等，像是…

輸出不同型別

在另一隻檔案裡，我們可以使用 import 並利用 ES6 的解構來引入，因此記得名稱要寫對。

豆知識：外面加上括號的寫法跟解構很像但不完全是，可參考此處。

import basic

以上是基本的匯出引入方式，當然你也可以嘗試不同的寫法（三種）：

named export 三種寫法

import 三種寫法

重點在於， export 匯出的不能為純值，必須賦予名稱。
像是以下就會報錯：

named export error

export default

剛剛提到一隻檔案只能有一個 default ，遵循這個以外就沒像 export 那麼多限制了，以下三種寫法都可以。

export default — 1

export default — 2

export default — 3

因為一隻檔案只會有一個 default ，所以在引入時也不需要加上 括號{} 。

export default ( import )

注意， export default 等同於 export { a as default } ，就是在匯出時賦予值給 default 這個名稱，因此以下的寫法會報錯：

export default error

另外比較常見的寫法是包在物件裡：

常見寫法 ( 匯出 )

常見寫法 ( 引入 )

併用

如果我的檔案同時匯出 named export 與 export default 的話怎麼寫？

合併匯出

合併引入

結論

以上看完…大概可以由兩個差異來做總結：

named export 可以匯出多個和需要賦予名稱，在匯出引入時較嚴謹，需要加上括號 {} 且名稱要對。

export default 相對則是比較寬鬆。

至於用哪個比較好…這問題還是要交給團隊自己去討論！大家有一個共識是最重要的。

延伸閱讀

什麼？！我們竟然有 3 個標準？ - 你有聽過 CommonJS 嗎？(Day9) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

參考資料

完全解析 JavaScript import、export

模組系統

ES6 入门教程