CommonJS และ ESM คืออะไร? และต่างกันอย่างไร?

หลายๆ คนมักจะงงๆ และสับสนระหว่างการใช้ import หรือการใช้ require ซึ่งจริงๆ มันก็คือการเปรียบเทียบระหว่าง CommonJS และ ESM นั่นเอง

CommonJS คืออะไร?

CommonJS เป็น standard module ที่มาพร้อมกับ Node.js ตั้งแต่เริ่มต้น ตัว CommonJS จะใช้หลักๆ ที่ฝั่ง Server ร่วมกับ Node.js ตัวแปลที่สามารถใช้ใน CommonJS ได้ ก็เช่น dirname , filename และก็ NODE_PATH อะไรพวกนั้น

การ import module จะมีรูปแบบแบบนี้

1
const fs = require('fs')
2
const express = require('express')
3

4
const myModule = require('./myModule')

และส่วนการ export ก็จะเป็นแบบนี้

1
function hello() {
2
  console.log('hello')
3
}
4

5
// แบบ default
6
module.exports =
7
  // แบบ named
8
  module.exports.hello = hello
9

10
// หรือ
11
module.exports = { hello }
12
exports.hello = hello

ไฟล์ package.json ถ้าเป็น CommonJS เราจะระบุ type เป็น commonjs หรือไม่ต้องใส่ (default)

1
{
2
  "name": "my-package.json",
3
  "version": "1.0.0",
4
  "type": "commonjs"
5
}

ชื่อไฟล์ จะเป็น .js ธรรมดา หรือ .cjs

ESM คืออะไร?

ESM หรือ ES Modules หรือ EcmaScript Modules

การ import แบบ ES Modules

1
import fs from 'fs'
2
import { someModule } from './myModule'

การ export ก็จะเป็นแบบนี้

1
// default
2
export default name
3

4
// named
5
export name

ไฟล์ package.json ใน ES Modules เราจะต้องระบุ type เป็น module แบบนี้

1
{
2
  "name": "my-package.json",
3
  "version": "1.0.0",
4
  "type": "module"
5
}

ชื่อไฟล์จะเป็น .mjs

Happy Coding ❤️