- 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!'
- 模块的导入（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
- 与 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 代码
},
},
],
},
};