技術標籤：前端工程化前端整理前端前端模組化

1. ES6模組化（大一統的模組化規範）

在ES6模組化規範誕生之前，Javascript社群已經嘗試並提出了AMD、CMD、CommonJS等模組化規範。

但是，這些社群提出的模組化標準，還是存在一定的差異性與侷限性、並不是瀏覽器與伺服器通用的模組化標準，例如：

• AMD和CMD適用於瀏覽器端的Javascript模組化

• CommonJS適用於伺服器端的Javascript模組化

因此，ES6語法規範中，在語言層面上定義了ES6模組化規範，是瀏覽器端與伺服器端通用的模組化開發規範。

ES6模組化規範中定義：

• 每個js檔案都是一個獨立的模組
• 匯入模組成員使用import關鍵字
• 暴露模組成員使用export關鍵字

2. ES6模組化的基本語法

2.1 預設匯出、預設匯入

• 預設匯出語法：export default 預設匯出的成員
• 預設匯入語法：import 接收名稱 from 模組識別符號

// 當前檔案模組為 m1.js

// 定義私有成員 a 和 c
let a = 10;
let c = 20;
// 外界訪問不到變數 d ,因為它沒有被暴露出去
let d = 30;

function show() {};
// 將本模組中的私有成員暴露出去，供其它模組使用
export default {
    a,
    c,
    show
};

// 匯入模組成員
 

import m1 from './m1.js'

console.log(m1);
// 列印輸出的結果為：
// { a: 10, c: 20, show: [Function: show] }

注意：每個模組中，只允許使用唯一的一次export default，否則會報錯！

2.2 按需匯出、按需匯入

• 按需匯出語法： export let s1 = 10

• 按需匯入語法： import { s1 } from '模組識別符號'

// 當前檔案模組為 m1.js

// 向外按需匯出變數 s1
export let s1 = 'aaa';
// 向外按需匯出變數 s2
export let s2 = 'ccc'
 
;
// 向外按需匯出方法 say
export function say = function() {};

// 匯入模組成員
import { s1, s2 as ss2, say } from './m1.js';

console.log(s1); // 列印輸出 aaa
console.log(ss2); // 列印輸出 ccc
console.log(say); // 列印輸出 [Function: say]

注意：每個模組中，可以使用多次按需匯出

2.3 直接匯入並執行模組程式碼

有時候，我們只想單純執行某個模組中的程式碼，並不需要得到模組中向外暴露的成員，此時，可以直接匯入並執行模組程式碼

// 當前檔案模組為 m2.js

// 在當前模組中執行一個 for 迴圈操作
for (let i = 0; i < 3; i++) {
    console.log(i);
}

// 直接匯入並執行模組程式碼
import './m2.js'