2021-08-06-[筆記]ES6-Module 模組化系統

前言：
模組化的優點讓我們可以在不同專案下引用所需檔案即可，一方面可以快速除錯，另一方面也能減少檔案大小。

---

模組系統
完全解析 JavaScript import、export
[ES6] Javascript Import & Export 教學 | Modules | 模組化

---

歷史

在 ES6 以前，JavaScript 長期以來都未支援模組系統。而在 ES6 出現後，JavaScript 融合了 AMD 跟 CommonJS 優點，加入模組化系統。

為何我們要使用 import export ?

1. 壓縮程式碼大小
2. 方便管理程式碼

如何使用與重點

1. 輸出資料，透過 export 方法，通常位於檔案最後
2. 輸入資料，透過 import 方法，通常輸入位於最前面
3. ES6 的模組程式碼會自動變成 strict-mode (嚴格模式)

匯出

思思有兩種，而匯出也有分兩種

1. default export
2. 具名匯出

default export

每個檔案中，export default 只能有一個，寫法如下

// 範例1
export default 1;

// 範例2
const b  = '我是字串練習';
export default b;

// 範例3
export const data = [1,2,4]; 

// 範例4
export default function() { console.log("函式")}

export default 則可以直接使用匿名函式的形式匯出

具名匯出

具名匯出是需要將變數、物件預先宣告後再進行匯出。

// 範例1
export let a =5;

// 範例2
export function Demo(){ console.log('a')};

// 範例3
const data = [1,2,4]; 
const c = '測試';
export {data,c} ;

// 範例4
export { Data as App } from 'Data.js' // 將輸出變數 Rename 成 App

小結論

• 具名匯出跟預設匯出式可以併存

匯入

將 export 檔案載入，載入方式根據匯出方式為具名還是預設而有所不同。此外，預設跟具名也可以同時載入。

// 具名匯出
import { data } from './app.js';

// 預設匯出
import data from './app.js'

// 全部載入(此為具名匯出)
import * as Test from './test.js' // 代表我要將 export 中資料全部都輸入

import $ from 'jquery'; // 當 export 檔案只有一個，就可以不用花括號

// 前方式預設匯出、後方就是具名
import defaultExport, * as name from "module-name";

如果不是 export default 就必須使用解構 {} 方法讀取，此外載入檔案時 script 上要記得加上 type = 'module'

使用時機

1. 根據卡斯柏老師文章內容提到，export default 似乎最常被使用到，然而文章中也由提及預設匯出的問題。因此實作上還是要應專案而異。