模組與建置工具

為什麼要把程式拆成模組

程式寫到幾千行，全部放在一個檔案裡很難維護；拆成好幾個 <script> 檔案，所有最外層的變數又都在同一個全域作用域， 兩個檔案都宣告了 add 就互相覆蓋。載入順序錯了（先用到才載入）也會出錯。

模組化是把一個獨立的功能放在一個檔案裡，每個檔案就是一個模組（module）：

• 模組裡宣告的變數、函式只在這個模組裡看得到，不會汙染全域作用域
• 要給別人用的東西明確地 export（匯出），要用別人的東西明確地 import（匯入），依賴關係一目了然
• 程式碼容易重複使用，也容易分工

ES2015 為 JavaScript 加入了官方的模組語法，稱為 ES 模組（ES Modules，ESM）。這一課先學語法，再介紹寫模組化專案時常用的工具：npm、Babel、webpack 與 Vite。

本課的逐步執行動畫不支援 import／export（它跑的是一般 script），所以模組的程式碼用文字說明，工具的操作用終端機導覽。

export：具名匯出與預設匯出

具名匯出（named export）：在宣告前面加 export，一個模組可以有很多個。變數、常數、函式、類別都可以匯出。

// math.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
function secret() { … }     // 沒有 export：只有 math.js 自己能用

也可以寫在檔案最後一次匯出：export { add, PI };。

預設匯出（default export）：加上 default，一個模組只能有一個，通常用在「這個檔案主要就是提供這一個東西」時。

// print.js
export default function print(msg) {
  console.log('[訊息] ' + msg);
}

import：匯入模組

// index.js
import print from './print.js';              // 預設匯出：名稱自己取，不用大括號
import { add, PI } from './math.js';         // 具名匯出：放在大括號裡，名稱要和匯出時相同
import { add as plus } from './math.js';     // 用 as 重新命名，避免撞名
import * as math from './math.js';           // 把所有具名匯出收進一個物件：math.add、math.PI
import show, { add as sum } from './print-and-math.js';   // 同時匯入時，預設匯出寫在前面

print(add(1, 2));   // [訊息] 3

在瀏覽器裡使用模組：

<script type="module" src="index.js"></script>

ES 模組的規則：

npm 專案：package.json 與 node_modules

第 23 課用過 npm 執行 http-server。寫一個專案時，npm 還負責記錄「這個專案用了哪些套件」：

package.json 裡有兩種套件清單：

拿到別人的專案（沒有 node_modules）時，在專案資料夾執行一次 npm install，npm 就會依照 package.json 與 package-lock.json 把套件全部裝回來。 投影片提到的「全域安裝」（-g）是把套件裝在系統上；專案用的工具建議裝在專案裡（局部安裝），每個專案各自管理版本。

Babel：把新語法轉成舊瀏覽器看得懂的程式

JavaScript 的標準叫 ECMAScript，2015 年的大改版（ES2015，也叫 ES6）加入了 let、const、箭頭函式、class、模組、Promise 等， 之後每年都有新版（ES2016、ES2017……）。

Babel 是 JavaScript 的轉譯器（transpiler）：把新版的語法改寫成效果相同的舊語法，讓不支援新語法的瀏覽器也能執行。例如：

// 轉譯前
const fn = () => 1;

// 轉譯後（Babel 官方文件的範例）
var fn = function fn() {
  return 1;
};

投影片製作時，很多使用者還在用只支援 ES5 的舊瀏覽器（例如 IE），Babel 幾乎是必備工具。現在主流瀏覽器都已支援 ES2015 以後的大部分語法， Babel 主要用在：要支援較舊的瀏覽器、想用瀏覽器還沒全面支援的最新語法，或是轉譯 JSX（React 的語法）等非標準語法。

• @babel/core：Babel 的核心
• @babel/cli：在終端機執行 babel 指令
• @babel/preset-env：依「目標瀏覽器」自動決定要轉譯哪些語法

投影片裡的 @babel/polyfill 從 Babel 7.4.0 起已經停止使用，官方建議改為直接引入 core-js/stable。 語法可以轉譯，但舊瀏覽器缺少的內建函式（例如 Array.prototype.includes）要靠這類 polyfill 補上。

打包工具：webpack

模組拆得越細，檔案就越多。早期瀏覽器不支援模組，或是一個網頁要下載上百個小檔案很慢，所以有了打包工具（bundler）： 從一個入口檔案開始，順著 import 找出所有用到的模組，合併、壓縮成少數幾個檔案。

webpack 是最具代表性的打包工具，目前的主要版本是 webpack 5。它的設定檔 webpack.config.js 有幾個核心概念：

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },   // JS 先交給 Babel
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },          // 可以 import './style.css'
      { test: /\.png$/, type: 'asset/resource' },                        // 圖片：webpack 5 內建
    ],
  },
};

每一條 rules 是「符合 test 的檔案，交給哪些 loader 處理」。use 是陣列時，從右到左執行：先 css-loader 讀進 CSS，再由 style-loader 放進頁面。 投影片的圖片用 file-loader，webpack 5 起改用內建的 asset modules（type: 'asset/resource'），不必另外安裝。

現在常見的選擇：Vite

webpack 功能完整，但設定檔要自己寫，專案大了啟動也比較慢。現在新專案常用的是 Vite（法文的「快」，念作 /vit/）：

• 開發時不先打包：直接利用瀏覽器原生的 ES 模組，存檔後畫面幾乎立刻更新
• 幾乎不用設定：內建開發伺服器、CSS 與圖片的處理，一行指令建立專案
• 正式發布時才打包：npm run build 產生壓縮好的檔案（Vite 8 使用 Rolldown 打包）

2026 年 10 月查詢時，Vite 的最新主要版本是 8，需要 Node.js 20.19 以上或 22.12 以上。

學 webpack 的觀念（入口、依賴、loader、打包）仍然有用：Vite 與其他工具做的是同一件事，只是做法更自動。

重點精華回顧

• 模組化：一個檔案一個模組，有自己的作用域，用 export 匯出、import 匯入，不汙染全域。
• 具名匯出可以有很多個，匯入時放大括號、名稱要相同（可用 as 改名）；預設匯出最多一個，匯入時自己取名、寫在前面。
• 瀏覽器用 <script type="module"> 載入模組，要透過伺服器開啟；模組自動是嚴格模式，只執行一次。
• npm init -y 建立 package.json；npm install 把套件裝進 node_modules；開發工具用 --save-dev 放進 devDependencies；npm run 指令 執行 scripts。
• Babel 把新語法轉譯成等效的舊語法，搭配 @babel/preset-env 與 babel.config.json；@babel/polyfill 已停止使用。
• webpack 從 entry 開始找出所有依賴，打包到 output；loader 處理 JavaScript 以外的檔案。
• Vite 開發時直接使用瀏覽器的 ES 模組、幾乎不用設定，npm create vite@latest 建立專案、npm run dev 啟動。