現代 Web 模組生態

一、Web 開發的模組系統總覽

1️⃣ Node.js

✅ CommonJS（早期標準）

// 匯出
module.exports = { add }

// 匯入
const { add } = require('./math')

// 匯出
module.exports = { add }

// 匯入
const { add } = require('./math')

＊ 同步載入
＊ Node.js 最早的模組機制
＊ 適合後端環境
＊ 檔案副檔名：.js

✅ ESM（ES Module）

// 匯出
export function add(a, b) {}

// 匯入
import { add } from './math.js'

// 匯出
export function add(a, b) {}

// 匯入
import { add } from './math.js'

＊ 非同步載入
＊ JavaScript 官方標準
＊ Node.js 12+ 開始支援

// 設定
{
  "type": "module"
}

// 設定
{
  "type": "module"
}

👉 現代 Node.js 建議使用 ESM

2️⃣ 瀏覽器

✅ ES Module（原生支援）

<script type="module">
  import { add } from './math.js'
</script>

<script type="module">
  import { add } from './math.js'
</script>

特點：
＊ 原生支援（Chrome / Edge / Firefox）
＊ 必須使用完整路徑
＊ 預設為 strict mode
＊ 支援 tree-shaking

3️⃣ React

React 本身使用 ESM，專案通常透過：
＊ Vite
＊ Webpack
＊ Next.js

import React from 'react'
import App from './App'

import React from 'react'
import App from './App'

👉 React 是建構在 ESM 之上的 UI Library

4️⃣ Vue

＊ Vue 3 全面使用 ESM，推薦搭配 Vite
＊ .vue 單文件元件透過打包工具解析

import { createApp } from 'vue'
import App from './App.vue'

import { createApp } from 'vue'
import App from './App.vue'

👉 Vue 3 + Vite 是現代主流組合

5️⃣ Webpack（模組打包器）

Webpack 作用：
＊ 解析模組依賴圖
＊ 將多個檔案打包成一個 bundle
＊ 支援：CommonJS、ESM、CSS、圖片、Loader / Plugin

👉 它不是模組系統
👉 它是「模組打包工具」

6️⃣ Vite（ESM 開發伺服器）

Vite 特點：
＊ 開發階段：使用原生 ESM（不打包）
＊ 建構階段：使用 Rollup 打包
＊ 啟動極快
＊ 支援 HMR

👉 Vite 是現代前端的主流工具