模組系統的概念大致上分兩種寫法，CommonJS 和 ESM 其引入方式的差異分別是require 和 import，今天會著重在ESM的寫法。

模組的概念其實在React框架已經不知不覺地被頻繁的使用了，像是最常見的hook--useState就是在引入模組的時候才做使用的，又或是元件的寫法也是由模組系統做延伸。

模組基本上可以分為兩種匯出方式命名匯出(Named Exports)和預設匯出(Default Exports)，其對應的匯入方式也有所差別

命名匯出(Named Exports)

命名匯出使用關鍵詞 "export" 加上 "要輸出東西的名稱" ，好處是在於同一個檔案能使用很多個匯出

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

其對應的匯入方式如下，import 模組，然後從哪裡from

import { add, subtract } from './math';

console.log(add(5, 3));      // 輸出: 8
console.log(subtract(10, 4)); // 輸出: 6

預設匯出(Default Exports)

1.預設匯出使用關鍵詞 ==export default==，特別注意同一個檔案只能有一個預設匯出

export default function add(a, b) {
  return a + b;
}

其對應的匯入方式如下，與上述雷同差別在於針對單一輸出的模組所以可以不用大括弧{}

import add from './math';

console.log(add(5, 3)); // 輸出: 8

總結

以下簡單整理一個表格，我自己會認為不太需要花時間去記憶，因為用久自然就熟了，而且現在套件的幫助下其實也比較不太會在這方面出差錯。