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

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

CommonJS คืออะไร?

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

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

const fs = require('fs')
const express = require('express')

const myModule = require('./myModule')

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

function hello() {
  console.log('hello')
}

// แบบ default
module.exports =

// แบบ named
module.exports.hello = hello

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

ไฟล์ package.json

ถ้าเป็น CommonJS เราจะระบุ type เป็น commonjs หรือไม่ต้องใส่

{
  "name": "my-package.json",
  "version": "1.0.0",
  "type": "commonjs"
}

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

ESM คืออะไร?

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

การ import แบบ ES Modules

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

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

// default
export default name

// named
export name

ไฟล์ package.json

ES Modules เราจะต้องระบุ type เป็น module

{
  "name": "my-package.json",
  "version": "1.0.0",
  "type": "module"
}

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

Happy Coding ❤️