ES Module 和 Commonjs 的區別

1. 語法

1.1 ES Module

導出：export / export default
導入: import * from 'module'

1.2 Commonjs

導出：module.exports
導入：const module = require('module')

 

2. 特性

2.1 ES Module

靜態引入、編譯時引入(支持Tree shaking)

// lib.mjs
export let a = 1
export const b = 2
export function aPlus1 () {
   return a++  
}

// index.mjs
import { a, aPlus1 } from './lib.mjs'

console.log(a) // 1

aPlus1()

console.log(a) // 2

// package.json - 新版本node支持執行ES Mdolue，不過要加上這個配置，且文件后綴要為mjs
{
 "type": "module"
}

 

2.2 Commonjs

動態引入、執行時引入

// lib.js
let a = 1
let b = 2
function aPlus1 () {
  return a++
}
module.exports = {
 a, b, aPlus1
}

// index.js
let { a, aPlus1 } = require ('./lib.js')

console.log(a) // 1

aPlus1()

console.log(a) // 1