在前端开发领域，ES6 已经被广泛应用于项目开发，它拥有更加简洁的语法和更多的新特性，使得开发者可以更加高效地完成代码编写。然而，ES6 的语法并不被所有浏览器所支持，这时我们就需要使用 Babel 进行编译。本文将介绍如何使用 Babel 将 ES6 代码编译成 CommonJS2 模块。
什么是 CommonJS2 模块
在 CommonJS 规范中，模块是一种可以被重复使用的代码组织方式。它允许将代码分割成多个文件，每个文件单独导出需要暴露的部分，然后在其他文件中引用这些部分。这种方式可以提高代码的可重用性和可维护性。
CommonJS2 模块是在 CommonJS 规范的基础上扩展而来的一种模块标准。它允许在浏览器环境中使用 CommonJS 模块，并支持异步加载。
使用 Babel 编译 ES6 代码
首先，我们需要安装 Babel 命令行工具和编译插件。
npm install -g babel-cli npm install --save-dev babel-core babel-preset-env
babel-cli 是 Babel 的命令行工具，babel-core 是 Babel 的核心库，babel-preset-env 是一个可以自动启用所需 Babel 插件的预设。这里我们使用 babel-preset-env 来编译 ES6 代码。
在项目根目录下新建 .babelrc 配置文件，并配置 babel-preset-env。
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
-
--
-
-上述配置表示编译后的代码将支持最近两个版本的浏览器和 Safari 7 及以上版本。根据需求调整 targets 配置即可。
接下来，在项目根目录下执行以下命令即可将 src 目录下的 ES6 代码编译成 CommonJS2 模块，并输出到 dist 目录下。
babel src --out-dir dist --modules commonjs --source-map inline
--out-dir dist 表示编译后的代码输出到 dist 目录下，--modules commonjs 表示编译后的代码采用 CommonJS2 模块，--source-map inline 表示生成源映射文件以便在调试时使用。
示例代码
以下是一个示例代码，它将一个数字翻倍并导出结果。
ES6 代码
// src/double.js
export default function double(num) {
return 2 * num
}编译后的 CommonJS2 模块
-- -------------------- ---- ------- -- -------------- ---- -------- ------------------------------ ------------- - ------ ---- --- --------------- - -------- ----- - ------ - - ---- --
使用该模块
const double = require('./dist/double.js').default
console.log(double(2)) // 4总结
通过上述步骤，我们可以使用 Babel 将 ES6 代码编译成 CommonJS2 模块，使得代码可以在浏览器和 Node.js 中共用，并提高了代码的可重用性和可维护性。在实际项目中应用时，需要根据需求进行相应的配置并进行权衡。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9d8a5f6b2d6eab34fd654