各位观众老爷们，早上好！我是今天的主讲人，咱们今天聊聊JavaScript模块打包工具（比如Webpack、Rollup这些）怎么解决CommonJS和ESM模块这对欢喜冤家之间的兼容性问题。 这可不是什么小问题，搞不好你的代码就得上演“鸡同鸭讲”的戏码。
一、 模块化简史：从远古时代到现代社会
要想搞清楚兼容性问题，得先了解一下模块化的发展历程。 就像了解一个人，总得知道他从小到大经历了什么。
-
远古时代（没有模块化的时代）： 那时候，JavaScript代码就像一锅粥，所有的变量和函数都暴露在全局作用域中。 这样做的后果就是：
-
命名冲突： 比如，两个库都定义了一个名为
$的变量，那后面的库就把前面的库给覆盖了。 -
依赖关系混乱： 代码之间相互依赖，但你根本不知道哪个文件依赖哪个文件，维护起来就像拆炸弹。
-
-
CommonJS时代（Node.js的崛起）： CommonJS规范在Node.js中大放异彩。 它使用
require导入模块，module.exports或exports导出模块。// moduleA.js (CommonJS) function add(a, b) { return a + b; } module.exports = { add: add }; // main.js (CommonJS) const moduleA = require('./moduleA'); console.log(moduleA.add(1, 2)); // 输出: 3CommonJS是同步加载模块，也就是说，
require语句会阻塞代码的执行，直到模块加载完成。 这在服务器端不是问题，因为服务器端可以读取本地文件。 但是在浏览器端，同步加载会导致页面卡顿。 -
AMD时代（为浏览器而生）： AMD (Asynchronous Module Definition) 规范，使用
define函数定义模块，require函数异步加载模块。 代表作是RequireJS。// moduleA.js (AMD) define(function () { function add(a, b) { return a + b; } return { add: add }; }); // main.js (AMD) require(['./moduleA'], function (moduleA) { console.log(moduleA.add(1, 2)); // 输出: 3 });AMD是异步加载模块，不会阻塞代码的执行。 这在浏览器端非常重要。
-
ESM时代（官方标准）： ECMAScript Modules (ESM) 是JavaScript官方的模块化标准。 它使用
import导入模块，export导出模块。// moduleA.js (ESM) export function add(a, b) { return a + b; } // main.js (ESM) import { add } from './moduleA'; console.log(add(1, 2)); // 输出: 3ESM是静态分析的，也就是说，在编译时就能确定模块之间的依赖关系。 这使得它可以进行优化，比如tree shaking（删除未使用的代码）。 同时，ESM也是异步加载的。
二、 CommonJS和ESM的爱恨情仇
CommonJS和ESM就像一对性格迥异的兄弟。 CommonJS是老大哥，比较保守，同步加载；ESM是小弟，比较激进，异步加载。
-
语法差异： 这是最明显的差异。 CommonJS使用
require和module.exports，ESM使用import和export。 -
加载方式： CommonJS是同步加载，ESM是异步加载。
-
静态分析： ESM是静态分析的，CommonJS是动态分析的。 这意味着ESM可以在编译时进行优化，而CommonJS则不行。
-
this指向： 在CommonJS模块中，
this指向module.exports对象。 在ESM模块中，this是undefined。
三、 Module Bundlers：模块世界的调解员
Module Bundlers (模块打包工具) 的作用就是把各种模块（CommonJS、ESM、AMD等等）打包成一个或多个文件，以便浏览器或Node.js可以运行。 它们就像模块世界的调解员，负责解决各种模块之间的兼容性问题。 常见的Module Bundlers有Webpack、Rollup、Parcel等等。
1. Webpack：功能强大的全能选手
Webpack是一个功能非常强大的模块打包工具。 它可以处理各种类型的资源，比如JavaScript、CSS、图片等等。 它也支持各种模块化规范，包括CommonJS、ESM、AMD等等。
-
CommonJS to ESM： Webpack可以把CommonJS模块转换成ESM模块。 它是通过
import语句来模拟require语句的。// webpack.config.js module.exports = { // ... module: { rules: [ { test: /.js$/, use: 'babel-loader', // 使用 Babel 来转换 CommonJS 模块 exclude: /node_modules/ } ] } };Babel 可以将 CommonJS 转换为 ESM，配合 Webpack 使用。
-
ESM to CommonJS： Webpack也可以把ESM模块转换成CommonJS模块。 它是通过
require语句来模拟import语句的。// webpack.config.js module.exports = { // ... output: { libraryTarget: 'commonjs2' // 将输出设置为 CommonJS 模块 } }; -
Tree Shaking： Webpack支持Tree Shaking，可以删除未使用的ESM代码，减小打包后的文件体积。
// webpack.config.js module.exports = { // ... optimization: { usedExports: true, // 开启 Tree Shaking minimize: true // 开启代码压缩 } }; -
动态导入 (Dynamic Imports)： Webpack支持动态导入，可以按需加载模块，提高页面加载速度。 动态导入本质上是异步加载。
// main.js async function loadModule() { const moduleA = await import('./moduleA'); // 动态导入 moduleA console.log(moduleA.add(1, 2)); } loadModule();
2. Rollup：专注于Library的精简大师
Rollup是一个专注于JavaScript Library打包的工具。 它的目标是生成尽可能小的文件。 它对ESM的支持非常好，可以进行非常aggressive的Tree Shaking。
-
ESM优先： Rollup的设计理念就是以ESM为中心。 它对ESM的支持是最好的。
-
Tree Shaking： Rollup的Tree Shaking非常强大，可以删除未使用的ESM代码，甚至可以删除未使用的变量和函数。
// rollup.config.js import commonjs from '@rollup/plugin-commonjs'; import { nodeResolve } from '@rollup/plugin-node-resolve'; export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'esm' // 输出为 ESM 格式 }, plugins: [ nodeResolve(), // 查找 node_modules 中的模块 commonjs() // 将 CommonJS 转换为 ESM ] };@rollup/plugin-commonjs插件可以将CommonJS模块转换为ESM模块。@rollup/plugin-node-resolve插件可以查找node_modules中的模块。 -
CommonJS支持： Rollup可以通过插件来支持CommonJS模块。 但是，由于CommonJS是动态分析的，所以Rollup无法对CommonJS模块进行Tree Shaking。
3. Parcel：零配置的傻瓜式操作
Parcel是一个零配置的模块打包工具。 它的目标是让开发者可以快速上手。 它支持各种模块化规范，包括CommonJS、ESM、AMD等等。
-
自动检测： Parcel可以自动检测代码中的模块化规范，并进行相应的处理。 你不需要手动配置。
-
零配置： Parcel是零配置的。 你只需要指定入口文件，Parcel就会自动完成所有的打包工作。
-
速度快： Parcel使用多线程进行打包，速度非常快。
四、 兼容性问题的解决策略
Module Bundlers解决CommonJS和ESM兼容性问题的策略主要有以下几种：
-
模块转换： 将CommonJS模块转换为ESM模块，或者将ESM模块转换为CommonJS模块。 这是最常用的方法。
-
模拟： 使用
require语句来模拟import语句，或者使用import语句来模拟require语句。 -
Shimming： Shimming是指为旧的API提供新的实现。 例如，你可以使用一个shim来为不支持ESM的浏览器提供ESM的支持。
-
Polyfill： Polyfill是指为旧的浏览器提供新的功能。 例如，你可以使用一个polyfill来为不支持Promise的浏览器提供Promise的支持。
五、 实战演练：Webpack配置详解
咱们来一个实战演练，看看Webpack是如何处理CommonJS和ESM的。
假设我们有以下文件：
src/
moduleA.js (CommonJS)
moduleB.js (ESM)
main.js (ESM)-
moduleA.js(CommonJS):// moduleA.js (CommonJS) function add(a, b) { return a + b; } module.exports = { add: add }; -
moduleB.js(ESM):// moduleB.js (ESM) export function multiply(a, b) { return a * b; } -
main.js(ESM):// main.js (ESM) import { add } from './moduleA'; import { multiply } from './moduleB'; console.log(add(1, 2)); // 输出: 3 console.log(multiply(3, 4)); // 输出: 12
现在，我们需要使用Webpack将这些文件打包成一个文件。
-
安装Webpack和相关依赖：
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-devwebpack: Webpack的核心库。webpack-cli: Webpack的命令行工具。babel-loader: 用于在Webpack中使用Babel。@babel/core: Babel的核心库。@babel/preset-env: Babel的预设，可以根据目标环境自动选择需要的转换。
-
创建
webpack.config.js文件：// webpack.config.js const path = require('path'); module.exports = { mode: 'development', // 设置模式为 development 或 production entry: './src/main.js', // 入口文件 output: { filename: 'bundle.js', // 打包后的文件名 path: path.resolve(__dirname, 'dist'), // 打包后的文件存放路径 }, module: { rules: [ { test: /.js$/, // 匹配所有 .js 文件 exclude: /node_modules/, // 排除 node_modules 目录 use: { loader: 'babel-loader', // 使用 babel-loader options: { presets: ['@babel/preset-env'] // 使用 @babel/preset-env 预设 } } } ] }, resolve: { extensions: ['.js'] // 自动解析这些后缀名的文件 }, devtool: 'inline-source-map' // 生成 source map 文件，方便调试 };mode: 设置模式为development或production。development模式会生成更详细的错误信息，方便调试。production模式会对代码进行优化，减小文件体积。entry: 指定入口文件。output: 指定打包后的文件名和存放路径。module.rules: 定义模块的加载规则。 这里我们使用babel-loader来处理JavaScript文件。resolve.extensions: 定义需要自动解析的后缀名。devtool: 生成source map文件，方便调试。
-
创建
.babelrc文件：// .babelrc { "presets": ["@babel/preset-env"] }这个文件告诉Babel使用
@babel/preset-env预设。 -
运行Webpack：
npx webpack这会在
dist目录下生成bundle.js文件。 -
在HTML文件中引入
bundle.js：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webpack Example</title> </head> <body> <script src="dist/bundle.js"></script> </body> </html>打开HTML文件，你就可以在控制台中看到输出结果。
六、 高级技巧：动态导入和Code Splitting
除了基本的模块打包之外，Webpack还支持动态导入和Code Splitting。 这些技术可以提高页面加载速度和性能。
-
动态导入 (Dynamic Imports)： 动态导入可以按需加载模块，而不是一次性加载所有的模块。 这可以减小初始加载的文件体积，提高页面加载速度。
// main.js async function loadModule() { const moduleA = await import('./moduleA'); // 动态导入 moduleA console.log(moduleA.add(1, 2)); } loadModule();Webpack会自动将动态导入的模块打包成单独的文件。
-
Code Splitting： Code Splitting是指将代码分割成多个文件。 这可以并行加载多个文件，提高页面加载速度。 Webpack支持多种Code Splitting方式，比如：
- 入口点 (Entry Points)： 将不同的功能模块打包成不同的入口点。
- 动态导入 (Dynamic Imports)： 使用动态导入来分割代码。
- SplitChunksPlugin： 使用SplitChunksPlugin来提取公共模块。
// webpack.config.js module.exports = { // ... optimization: { splitChunks: { chunks: 'all' // 分割所有类型的 chunks } } };splitChunks.chunks: 'all'会将公共模块提取成单独的文件。
七、 总结：模块化，兼容性，与未来
今天我们聊了JavaScript模块化的发展历程，CommonJS和ESM的差异，以及Module Bundlers如何解决CommonJS和ESM的兼容性问题。 记住，没有银弹。 选择哪个Module Bundler取决于你的项目需求。
-
Webpack： 功能强大，适合大型项目。
-
Rollup： 精简高效，适合Library打包。
-
Parcel： 零配置，适合快速上手。
随着JavaScript的不断发展，模块化也在不断演进。 未来，ESM将会成为主流。 但是，在很长一段时间内，我们仍然需要处理CommonJS和ESM的兼容性问题。 希望今天的讲座能帮助你更好地理解这些问题，并找到合适的解决方案。
好了，今天的讲座就到这里。 感谢大家的观看！ 散会！