在ES6中，我們可以使用 export 和 import 關鍵字來定義和使用自定義模塊。

定義模塊

導出（export）

1. 命名導出（Named Exports）：

   使用 export 關鍵字來導出模塊中的變量、函數、類等。例如：

   // mathUtils.js
   export const sum = (a, b) => a + b;
   export const subtract = (a, b) => a - b;
   

   這里我們導出了 sum 和 subtract 函數。

2. 默認導出（Default Export）：

   使用 export default 關鍵字可以導出模塊的默認值，一個模塊只能有一個默認導出。例如：

   // utils.js
   const multiply = (a, b) => a * b;
   export default multiply;
   

   這里我們默認導出了 multiply 函數。

使用模塊

導入（import）

使用 import 關鍵字來引入其他模塊導出的內容。

1. 命名導入（Named Imports）：

   引入命名導出的變量、函數等。例如：

   // app.js
   import { sum, subtract } from './mathUtils';console.log(sum(5, 3)); // 輸出 8
   console.log(subtract(5, 3)); // 輸出 2
   

2. 默認導入（Default Imports）：

   引入默認導出的內容。例如：

   // app.js
   import multiply from './utils';console.log(multiply(5, 3)); // 輸出 15
   

3. 混合導入（Mixing Named and Default Imports）：

   可以同時導入命名導出和默認導出。例如：

   // app.js
   import multiply, { sum } from './utils';console.log(sum(5, 3)); // 輸出 8
   console.log(multiply(5, 3)); // 輸出 15
   

注意事項

• export 和 import 必須在頂層作用域使用，不能嵌套在函數或條件語句中。
• 導入路徑可以是相對路徑或者絕對路徑。
• 模塊的導出和導入是靜態的，意味著在編譯階段就確定了導入模塊的內容。

使用ES6模塊系統能夠幫助我們更好地組織和管理JavaScript代碼，提高代碼的可維護性和可重用性。