Jimmy 的架站筆記

嗨~我是 Jimmy!我可能不是你認識的第 1 個 Jimmy,但一定是最帥的那個。


JavaScript module - CommonJS, ES Module

By Jimmy 2024-04-15
發表於 javascript
JavaScript module - CommonJS, ES Module

在 JavaScript 中,主要有兩種方式來處理 module: CommonJS 以及 ES Module

1. CommonJS

1.1 使用 CommonJS

根據 Node.js 的文件,以下方法會將檔案視為 CommonJS module:

1.2 模組化一個變數

// car.js
// export module
const brand = 'skoda'

module.exports = brand
// use module
const brand = require('./car.js')
console.log(brand)
// skoda

1.3 模組化多個變數

// car.js
// export module
const brand = 'skoda'
const maxHorsePower = 180
const getHorsePower = (torque, engineRpm) => {
	return torque * engineRpm
}

module.exports = {
	brand,
	maxHorsePower,
	getHorsePower
}

// 以上也可以寫成
exports.brand = 'skoda'
exports.maxHorsePower = 180
exports.getHorsePower = (torque, engineRpm) => {
	return torque * engineRpm
}
// index.js
// use module
const car = require('./car.js')
console.log(car)
/*
{
  brand: 'skoda',
  maxHorsePower: 180,
  getHorsePower: [Function: getHorsePower]
}
*/

2. ES Module

2.1 使用 ES Module

{
  ...
  "type": "module"
}

2.2 模組化一個或多個變數

可以直接用 export const 的方式來 export 一個或多個變數

// car.js
export const brand = 'skoda'
export const maxHorsePower = 180
export const getHorsePower = (torque, engineRpm) => {
	return torque * engineRpm
}
// index.js
import { brand, maxHorsePower, getHorsePower } from './car.js'
console.log(brand)
// skoda
console.log(maxHorsePower)
// 180
console.log(getHorsePower)
// [Function: getHorsePower]

也可以直接 import 所有的變數,會變成一個 object

// index.js
import * as car from './car.js'
console.log(car)
/*
[Module: null prototype] {
  brand: 'skoda',
  getHorsePower: [Function: getHorsePower],
  maxHorsePower: 180
}
*/
console.log(car.brand)
// skoda

2.3 export default

export default 可以指定預設要 export 的變數,但一個檔案只能 export default 一個變數,否則會噴錯:

錯誤用法:

ES Module

// car.js
const brand = 'skoda'
export const maxHorsePower = 180
export const getHorsePower = (torque, engineRpm) => {
	return torque * engineRpm
}

export default brand

import 後面沒有被包在 {} 裡的變數,就會是 export default 的變數:

// index.js
import brand, { maxHorsePower, getHorsePower } from './car.js'
console.log(brand)
// skoda
console.log(maxHorsePower)
// 180
console.log(getHorsePower)
// [Function: getHorsePower]

2.4 在 Node.js 使用 ES Module

// 在 path 前加上 node:,後面則放要 import 的 Node.js module,不過 node: 也可以省略
import { readFile } from 'node:fs'
import path from 'path'

3. 參考資料

Understanding CommonJS vs. ES Modules in JavaScript
Modules: CommonJS modules | Node.js v21.7.3 Documentation
兩種主流的模組化,ES Modules與CommonJS
什麼?!我們竟然有 3 個標準? - 你有聽過 CommonJS 嗎?(Day9)


你可能也會喜歡

【JavaScript基礎】:Array Methods — 陣列方法整理

【JavaScript基礎】:Array Methods — 陣列方法整理

陣列(array)屬於物件(object)的一種,在Javacript中有許多陣列方法(array methods)可做轉換或運算,來整理一下在看到陣列常見和相關的方法。 1. Array and String:陣列與字串的轉換 字串與陣列相關的方法 1.1 字串轉換成陣列 1.1.1 **Array.from()** 這個方法不只可以轉換字串,還可以轉換類陣列等等。 語法: > Array.f

Read More
【 JavaScript 】JavaScript 費氏數列的 3 種解法

【 JavaScript 】JavaScript 費氏數列的 3 種解法

面試的時候經常會問到怎麼用 JavaScript 解費氏數列,面試到後面整理了一下常見的 3 種解法: 首先說明一下費氏數列:[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55] ,通常會請你用 JavaScript 求解陣列的最後一個值。 1. JavaScript 費氏數列 - 遞迴解 2. JavaScript 費氏數列 - 迴圈解 3. JavaScript 費氏數列 - Memoization

Read More