JavaScript並沒有與生俱來的模組化概念和功能。

就和人一樣，誕生之初我們並不能事先決定好自己可以“自帶”哪些天賦，但生長過程中，當我們發現自己需要或者期待某種能力時，我們可以後天習得。

上面的描述恰好適合【JavaScript與“模組化”】

首先，我們先來聊一聊CommonJS。

CommonJS起始於Node.js的模組化實現，對前端領域也產生了深刻的影響。

在CommonJS中，每個檔案就是一個獨立的模組，檔案裡面的內容（變數、函式等）都是私有的、擁有獨立作用域、對外不可見的。

對於每個模組，我們都有兩個變數可以使用，分別是：require 和 module 

1. require

用於載入某個模組，載入到的具體值就是module.exports返回的物件、函式、變數（如果沒有合理的返回值將會報錯）。

另外，需要注意的是：

• 在CommonJS中require的是相關模組返回值的拷貝，即原有被匯入模組與該require進來的拷貝是互相獨立、互不干擾的；
• require函式的執行是同步的（ESM中的import是非同步的）；
• 已被載入過的模組會被快取；

2. module（module.exports/exports）

module代表了當前模組，module上有一個exports屬性，它會向外匯出需要對外暴露的結果。

同時在相應的獨立模組中，會有一個私有的exports變數，預設指向module.exports屬性，我們可以將exports理解為一個向外匯出的物件。

示例：

// test1.js

var a = 1;
module.exports = {
  a,
};

// run1.js

const obj = require('.test1');
console.log(obj);
// { a: 1 }

// test2.js

let a = 1;
exports.a = a;

// run2.js

const obj = require('.test2');
console.log(obj);
// { a: 1 }

// test3.js

let a = 1;
module.exports = () => {
  exports.a 
 
= a;
  return {
    ...exports,
    b: 0,
  };
};

// run3.js

const fn = require('./test');

console.log(fn());
// { a: 1, b: 0 }

// 20220311