随着前端开发的不断发展，JavaScript 已经成为了 Web 开发中不可或缺的一部分。而 ECMAScript 6（以下简称 ES6）的出现更是使得 JavaScript 的发展进程迈上了一个新的台阶，提供了更加丰富、灵活的语言特性和功能。
但是随之而来的问题是，不同的浏览器和环境对 ES6 的支持程度不尽相同，因此为了保证代码的可用性，我们需要将 ES6 代码转换成 ES5 代码。在这个过程中，Babel 就是前端开发者最常使用的转换工具之一。本文将以如何使用 Babel 将 ES6 模块转换成 CommonJS 模块为例，为大家介绍使用 Babel 的具体方法。
什么是 CommonJS 模块？
在介绍如何将 ES6 模块转换成 CommonJS 模块之前，我们需要先了解一下什么是 CommonJS 模块。CommonJS 是由社区推出的一个 JavaScript 模块规范，引入了 require() 和 exports 两个全局变量，用于模块的引入和导出。
在 CommonJS 中，每个文件就是一个模块，通过 require() 函数将需要的模块引入，然后通过 exports 变量将所需的内容导出，也就是说，CommonJS 模块需要使用 require() 方法进行依赖关系的定义和处理。
使用 Babel 将 ES6 模块转换成 CommonJS 模块
接下来进入正题，我们以一个简单的示例代码为例，来演示如何使用 Babel 将 ES6 模块转换成 CommonJS 模块。
// ES6 模块定义
export const name = 'Bob';
export function foo() {
return 'foo';
}上述代码定义了一个 ES6 模块，其中包含一个常量 name 和一个函数 foo。
首先，安装 Babel 的相关依赖包：
npm i -D @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-modules-commonjs
接着，在项目的根目录下创建 .babelrc 文件，并设置 Babel 的配置如下：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
}其中 @babel/preset-env 是 Babel 提供的预设包，用于根据我们所需要的浏览器和环境等信息自动转换代码，@babel/plugin-transform-modules-commonjs 是 Babel 提供的插件包，用于将 ES6 模块转换成 CommonJS 模块。
至此，我们已经安装完毕并配置好了 Babel 的环境，接下来就可以运行以下命令，将 ES6 模块转换成 CommonJS 模块：
npx babel src/ -d dist/
以上命令的含义是，将 src 目录下的所有文件经过 Babel 处理后，保存到 dist 目录下。处理后的代码如下：
// CommonJS 模块定义
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.name = void 0;
const name = 'Bob';
exports.name = name;
function foo() {
return 'foo';
}
module.exports = {
foo: foo
};经过转换后的代码使用了 module.exports 进行导出，同时将 const 定义的常量转换成了 Object.defineProperty() 来定义减少干扰。另外，由于我们使用了 @babel/plugin-transform-modules-commonjs 插件，因此我们不用手动修改代码中的 import 或 export 用法了。
总结
在本文中，我们介绍了使用 Babel 将 ES6 模块转换成 CommonJS 模块的具体操作方法，并提供了一个示例代码供大家参考。通过本文的介绍，我们不仅学习了如何使用 Babel 进行代码转换，也了解了 CommonJS 模块的定义方法和使用方式，相信这些知识对于我们在日常的前端开发中会有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b3ad1aadd4f0e0ffcb3a56