Node.js CommonJS Modules

筆記 Node.js 的 CommonJS Modules 機制，並比較與 ES 6 Modules 的使用異同 🙂

說明

使用 CommonJS 的目的在於模組化開發 JS，並享受豐富的 NPM 生態資源，但 CommonJS 無法在 Brwoser Side 原生環境使用，必須藉由 WebPack、Parcel 等打包工具模組的引入來使用。

ES 6 Modules (ESM) 則可以原生在瀏覽器中使用，但需要注意瀏覽器的支援度，使用上 Script Tag 必須要符合使用的規範：

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

Node.js 預設支援的是 CommonJS，不必透過 WebPack、Parcel 等打包工具就可以使用模組化的開發方式，但限於後端的應用環境，例如寫 Terminal Tool 或者扮演 Web Server，如果模組化的成果是前端網站，仍是必須透過打包工具來轉換。

從 Node.js 14 以後支援 ESM，但無法在單一 JS Files 混用 ESM 與 CommonJS，但可以在不同的 JS Files 中使用不同的 Modules 技術，區別的方式是透過 File Eextension。

Modules Tech	File Extension
CommonJS	.cjs
ESM	.mjs

mod.js

const Loto = {
    name: 'Loto'
    hp: 15,
    str: 3,
    vit: 2,
}

module.exports = Loto;

app.js

const hero = require('./mod.js')
console.log(hero);

node app.js
rem { name: 'Loto', hp: 15, str: 3, vit: 2 }

方式一：從 packages.config 設定 type 讓預設由 CommonJS 改為 ESM。

{
  "type": "module",
}

mod.js

function square(num) {
    return num * num;
  }
  
  export { square };

app.js

import { square } from './mod.js';

console.log(square(3));

node app.js
rem 9

方式二：利用不同的 file extension mjs 讓 Node.js 自行判斷。

mod.mjs

function square(num) {
    return num * num;
  }
  
  export { square };

app.mjs

import { square } from './mod.mjs';

console.log(square(3));

node app.mjs
rem 9