iT邦幫忙

2026 iThome 鐵人賽

DAY 2
0
JavaScript

不要再說你不會後端!30 天 Node.js 降維打擊指南 系列 第 2

Day 2:模組化系統的對決(CommonJS vs ES Modules)

  • 分享至 

  • xImage
  •  

恭喜你搞定了環境建置!在後端世界裡,系統邏輯通常非常龐大,你不可能把幾千、幾萬行的程式碼全部塞在同一個 app.js 裡。我們必須將程式碼拆解成一個個獨立的「模組(Modules)」,這就是 Day 2 的核心任務。

Node.js 歷史上有兩套主流的模組化系統正在進行新舊交替,搞懂它們的差異,是你擺脫「新手村」的關鍵。


1. 什麼是模組化?

想像你在組裝機器人,你不會把馬達、感測器和主機板全部鎔鑄成一塊廢鐵。你會把這三個部分獨立分開,透過特定的線材(介面)連接。
在程式碼中,「模組化」就是把負責不同功能的程式碼(例如:負責連線資料庫的、負責計算數學邏輯的)寫在不同的檔案裡,需要的時候再去匯入 (Import) 它們。


2. 傳統霸主:CommonJS (CJS)

這是 Node.js 誕生時就自帶的模組系統,特徵是使用 requiremodule.exports。雖然比較老,但在很多舊專案或老套件中仍然非常常見。

實作練習:
在昨天的 hello-node 資料夾下,新增一個檔案叫 math.js

// math.js (準備被匯出的模組)
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// 匯出這些函式,讓其他檔案可以使用
module.exports = {
    add,
    subtract
};

接著打開你昨天的 app.js,修改成以下內容:

// app.js (主程式)
const math = require('./math'); // 匯入剛才寫的 math.js (不需要寫 .js 副檔名)

console.log("CommonJS 測試:");
console.log(`5 + 3 = ${math.add(5, 3)}`);
console.log(`10 - 4 = ${math.subtract(10, 4)}`);

在終端機執行 node app.js,你會看到完美的計算結果。


image

3. 現代標準:ES Modules (ESM)

這是現代 JavaScript (ES6) 的官方標準,特徵是使用 importexport。如果你寫過前端的 React 或 Vue,對這套系統一定不陌生。我們在後續的 30 天挑戰中,將全面採用 ESM。

Node.js 預設使用 CommonJS,要強制開啟 ESM,我們需要請出 Node.js 專案的大管家:package.json

步驟 3-1:初始化專案 (NPM Init)

在終端機輸入以下指令,這會在你的資料夾產生一個 package.json 檔案:

npm init -y

image

步驟 3-2:開啟 ESM 模式

打開剛才生成的 package.json,在最外層加入一行 "type": "module"

{
  "name": "hello-node",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module", 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

步驟 3-3:改寫為 ESM 語法

修改你的 math.js

// math.js (ESM 寫法)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

修改你的 app.js

// app.js (改為 ESM 寫法)
import { add, subtract } from './math.js'; 

console.log("ES Modules 測試:");
console.log(`5 + 3 = ${add(5, 3)}`);
console.log(`10 - 4 = ${subtract(10, 4)}`);

再次執行 node app.js,結果一樣,但你的程式碼已經進化到現代標準了!
image


4. NPM 宇宙:安裝第三方套件

package.json 不只能設定模組模式,它更是幫你管理「第三方套件」的清單。我們來試著安裝一個強大的時間處理套件 dayjs

在終端機輸入:

npm install dayjs

安裝後,你會發現資料夾多出了一個 node_modules 資料夾(所有下載的程式碼都在這)和一個 package-lock.json(鎖定版本號用)。
image

現在,你可以直接在 app.js 裡引用別人的心血結晶:

import { add } from './math.js';
import dayjs from 'dayjs'; // 匯入第三方套件不加 ./,也不加副檔名

console.log("ES Modules 測試:");
console.log(`5 + 3 = ${add(5, 3)}`);
console.log(`現在時間是:${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);

image

Day 2 總結比較

  • CommonJS (傳統):看見 requiremodule.exports。匯入時不需寫副檔名。
  • ES Modules (現代標準):看見 importexport。必須在 package.json 加上 "type": "module" 才能啟用。匯入本地檔案必須寫副檔名(如 .js)。

上一篇
Day 1:環境建置與 Hello World
下一篇
Day 3:非同步編程的降維打擊(Event Loop 與 async/await)
系列文
不要再說你不會後端!30 天 Node.js 降維打擊指南 3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
愛瘸瘸
iT邦新手 5 級 ‧ 2026-09-16 20:12:36

學長好帥,好期待明天的內容

我要留言

立即登入留言