面試- JS Web API - ES6模組化

一个甜橙子發表於2024-09-13
面試JSWebAPI
  1. ES6 模組化的基礎概念
    ES6 模組化的核心在於兩個關鍵字：export 和 import。

export：用於將模組中的變數、函式、類等匯出，供其他模組使用。
import：用於從其他模組中匯入需要的功能。
2. 模組的匯出（export）
ES6 提供了兩種匯出方式：命名匯出（Named Exports） 和 預設匯出（Default Export）。

2.1. 命名匯出（Named Exports）
你可以匯出多個變數或函式，並在其他模組中按需匯入。

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

在另一個模組中，你可以按名稱匯入這些匯出內容：

// main.js
import { add, multiply } from './math.js';

console.log(add(2, 3));      // 輸出 5
console.log(multiply(2, 3)); // 輸出 6

2.2. 預設匯出（Default Export）
一個模組可以有一個預設匯出。預設匯出可以是任何值、函式或類。匯入時不需要用花括號，可以自定義匯入的名字。

// logger.js
export default function log(message) {
  console.log(message);
}

匯入時：

// main.js
import log from './logger.js';

log('Hello, ES6 modules!'); // 輸出 'Hello, ES6 modules!'
  1. 模組的匯入（import）
    3.1. 命名匯入
    可以從模組中按名稱匯入多個匯出的內容：
import { add, multiply } from './math.js';

3.2. 預設匯入
當匯入模組的預設匯出時，不需要使用花括號，可以自行命名：

import log from './logger.js';

3.3. 匯入所有內容
你可以使用 * 匯入模組中的所有匯出，並賦值給一個物件，這樣可以透過物件屬性訪問模組中的每個匯出。

// 匯入所有命名匯出
import * as math from './math.js';

console.log(math.add(2, 3));      // 輸出 5
console.log(math.multiply(2, 3)); // 輸出 6
  1. 與 Webpack 的結合
    在現代前端開發中，工具如 Webpack 可以很好地結合 ES6 模組來打包程式碼。Webpack 會解析 import 和 export 語法，並將不同模組打包成瀏覽器可以識別的程式碼。

Webpack 的配置一般如下：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // 使用 Babel 轉換 ES6 程式碼
        },
      },
    ],
  },
};

相關文章