前言
JavaScript 是一门非常灵活和适应性强的语言，但随着应用的复杂和代码量的增加，开发者们也越来越需要一个可靠和完善的模块化系统来帮助管理代码。在过去，不同的 JavaScript 环境使用了不同的模块化解决方案，包括 AMD、CommonJS 和 UMD 等。但随着 ES6 的出现，JavaScript 语言本身也提供了模块化支持，即 ES6 Module。
本文将会详细介绍 ES6 Module 和 CommonJS 的特性，并结合实例，介绍如何使用 Babel 转换器来将 ES6 Module 转换成 CommonJS 格式。
ES6 Module
ES6 模块是 JavaScript 中一种新的语言结构，用于将代码进行模块化划分。它提供了一个简单且明确的语法来定义模块和导出变量，具有以下特点：
- 默认采用严格模式
- 声明式语法
- 它支持静态分析和自动优化，包括 tree shaking 算法
- 具有优势，如循环依赖、异步导入
导出变量
ES6 模块导出变量的语法非常简单明了，我们可以通过 export 关键字来导出变量，例如：
// 模块文件 app.js
export const PI = 3.14159;
export function add(x, y) {
return x + y;
}我们也可以使用别名来导出，例如：
// 模块文件 app.js
export { PI as pi, add as addFunction }导入变量
要从 ES6 模块中导入变量，我们可以使用 import 关键字。例如：
// 模块文件 main.js
import { PI, add } from './app.js';
console.log(PI); // 3.14159
console.log(add(1, 2)); // 3我们也可以使用通配符 * 导入一个模块的所有导出，例如：
// 模块文件 main.js import * as utils from './app.js'; console.log(utils.PI); // 3.14159 console.log(utils.add(1, 2)); // 3
这种导入方式还可以与别名相结合，例如：
// 模块文件 main.js
import { pi as PI, addFunction as add } from './app.js';
console.log(PI); // 3.14159
console.log(add(1, 2)); // 3CommonJS
CommonJS 是 Node.js 中的模块化系统，并且在 Webpack 和 Browserify 等构建工具中也得到广泛应用。CommonJS 采用了同步的加载方式，具有以下特点：
- 通过
require关键字引入模块 - 通过
module.exports或exports导出变量 - 按照一定的规则对模块进行缓存
导出变量
为了从 CommonJS 模块中导出变量，我们需要使用 module.exports 或 exports 对象之一，例如：
// 模块文件 app.js
exports.PI = 3.14159;
exports.add = function (x, y) {
return x + y;
};也可以使用对象字面量直接导出一个对象，例如：
// 模块文件 app.js
module.exports = {
PI: 3.14159,
add: function (x, y) {
return x + y;
},
};导入变量
要从 CommonJS 模块中导入变量，我们需要使用 require 关键字，例如：
// 模块文件 main.js
const utils = require('./app.js');
console.log(utils.PI); // 3.14159
console.log(utils.add(1, 2)); // 3Babel 转换原理及实践
由于现代浏览器对 ES6 Module 的支持并不完备，因此在 Web 开发中，我们通常需要将其转换成另一种格式。最常用的转换方法之一就是使用 Babel 转换器将 ES6 模块转换成 CommonJS 格式。
安装 Babel
在使用 Babel 转换器之前，我们需要先安装它。可以使用以下命令进行全局安装：
npm install -g babel-cli
或者在项目中安装：
npm install --save-dev babel-cli
创建 babel 配置文件
Babel 需要读取 .babelrc 配置文件来加载插件和预设。在项目的根目录下，创建一个名为 .babelrc 的文件，并将以下代码复制到其中：
{
"presets": ["@babel/preset-env"]
}该文件只包含一个预设，即 @babel/preset-env，它会根据目标环境自动选择和引入必要的转换和 Polyfill。
使用 Babel 转换 ES6 Module
一旦安装了 Babel 并创建了 .babelrc 文件，我们现在可以将 ES6 模块转换为 CommonJS 格式了。在项目中使用以下命令：
babel app.js --out-file app-common.js
在以上命令中，我们将 app.js 文件转换为 app-common.js 文件，后者是 CommonJS 格式的输出。
实践示例
为了更好的理解 Babel 转换器的使用，我们可以通过以下实例进行操作。
步骤1
首先，我们需要在本地创建一个简单的 Node.js 项目。执行以下命令：
mkdir babel-app cd babel-app npm init
这个命令将创建一个 Node.js 项目并初始化一个 package.json 文件。
步骤2
创建一个 Node.js 模块文件 app.js，包含以下内容：
// app.js const arr = [1, 2, 3]; const sum = arr.reduce((a, b) => a + b, 0); export default sum;
步骤3
安装 Babel 及相关插件。执行以下命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-modules-commonjs
以上命令将安装 Babel 核心库，命令行工具，以及两个转换插件。
步骤4
在项目根目录中创建一个名为 .babelrc.json 的文件，并将以下代码粘贴到其中：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -----
-
-
--
---------- --------------------------------------------
-步骤5
最后，我们需要运行 Babel 命令来将 app.js 转换成 CommonJS 格式。执行以下命令：
npx babel app.js --out-file app-common.js
此命令将将 app.js 转换成 CommonJS 格式，并将结果存储在 app-common.js 文件中。
步骤6
现在，我们可以在另一个文件中通过 require() 导入 app-common.js 文件中导出的变量了。例如，我们可以创建另一个模块文件 main.js，并将 app-common.js 文件导入其中：
// main.js
const sum = require('./app-common.js');
console.log(sum);执行 main.js 文件，在命令行中输出结果：
node main.js 6
在这个例子中，我们首先使用了 export default 导出了一个变量，然后使用 Babel 将 ES6 模块格式转换为 CommonJS 格式。最后，在另一个模块化文件中使用 require() 导入了 CommonJS 格式的文件，并成功输出了变量的值。
总结
本文详细介绍了 ES6 Module、CommonJS 特性及使用 Babel 转换原理和实践，希望对大家有所帮助。ES6 Module 与 CommonJS 是两种主要的模块化解决方案，各有优势。通过使用 Babel 转换器，我们可以方便地将它们进行转换，并在 Web 开发中更加灵活和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1df78f6b2d6eab3d23c49