面试- JS Web API - ES6模块化

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!'

3. 模块的导入（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

4. 与 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 代码
        },
      },
    ],
  },
};