随着前端开发的不断发展，越来越多的开发者开始使用 ES6 语法来编写 JavaScript 代码。然而，由于现代浏览器对 ES6 的支持程度不尽相同，部分 ES6 语法在一些老旧的浏览器上并不能正常运行。为了解决这个问题，我们可以使用 Babel 将 ES6 代码转换成可运行的 ES5 代码。
在使用 Babel 编译 ES6 代码的过程中，我们往往需要将其打包成 CommonJS 模块，以方便在 Node.js 等环境下使用。下面，我将为大家介绍如何在使用 Babel 编译 ES6 代码时支持打包成 CommonJS 模块。
安装 Babel 和相关插件
首先，我们需要安装 Babel 及相关的插件。我们可以使用 npm 来进行安装。在终端中，输入以下命令：
npm install @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-modules-commonjs --save-dev
其中，@babel/core 是 Babel 的核心包，@babel/cli 提供了在命令行中使用 Babel 的能力，@babel/preset-env 是一个预设，包含了一些常用的 Babel 插件，以便我们快速地配置 Babel，而 @babel/plugin-transform-modules-commonjs 是一个将模块转换为 CommonJS 格式的插件。
配置 .babelrc 文件
下一步，我们需要为 Babel 配置一个 .babelrc 文件。我们可以在项目根目录下新建一个 .babelrc 文件，并在其中添加以下配置：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}这里，我们指定了两个配置项，分别对应上面安装的两个插件。presets 中指定了我们使用了 @babel/preset-env，同时 plugins 中指定了我们使用了 @babel/plugin-transform-modules-commonjs。
编译 ES6 代码
接下来，我们就可以使用 Babel 编译 ES6 代码了。我们可以在 package.json 文件中配置一个 build 命令，以方便编译。打开 package.json 文件，在 scripts 中添加以下配置：
"scripts": {
"build": "babel src -d lib --copy-files"
}其中，src 目录是我们存放 ES6 代码的目录，lib 目录是我们存放编译后的 ES5 代码的目录，--copy-files 参数表示在编译过程中将非 JavaScript 文件也进行拷贝。
输入以下命令，就可以开始编译了：
npm run build
示例代码
我们来看一个使用 Babel 编译 ES6 代码并打包成 CommonJS 模块的简单示例。新建一个名为 index.js 的文件，输入以下代码：
// index.js const sum = (a, b) => a + b; module.exports = sum;
接着，在项目根目录下新建一个 src 目录，并在其中创建一个名为 index.js 的文件，输入以下代码：
// src/index.js import sum from './sum.js'; console.log(sum(1, 2));
注意，这里我们使用了 ES6 的 import/export 语法。接下来，我们在终端中输入以下命令，将代码编译成 CommonJS 模块：
npm run build
这时，src/index.js 文件会被编译成 lib/index.js 文件。我们可以在 lib/index.js 中看到，其中的 import/export 语法已经被转换成了 CommonJS 的 require/module.exports 语法：
// lib/index.js
var _sum = _interopRequireDefault(require("./sum.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log((0, _sum.default)(1, 2));最后，我们可以在终端中执行以下命令，查看代码的运行结果：
node lib/index.js
我们可以看到，代码成功运行，并输出了 3。
结语
通过本文的介绍，我们知道了如何使用 Babel 编译 ES6 代码，并支持打包成 CommonJS 模块。这有助于我们在 Node.js 等环境下使用 ES6 语法来编写 JavaScript 代码。同时，我们也可以在 .babelrc 中配置其他的 Babel 插件，以满足我们不同的需求。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6793a67d504e4ea9bd7fe1b8