在前端开发中，我们经常需要使用 ES6 的语法特性，但是这些语法特性在某些浏览器中并不兼容。这时候，我们可以使用 babel 将 ES6 代码转换成 CommonJS 模块，以兼容更多浏览器环境。
什么是 Babel？
Babel 是一个 JavaScript 编译器，它可以将 ES6 代码转换成其他版本的 JavaScript 代码，使得我们可以在旧版的浏览器中运行目前最新的 JavaScript 代码。Babel 能够支持大量的 ES6 语言特性，例如 let、const、箭头函数等。
安装 Babel
要使用 Babel，我们首先需要安装它。我们可以使用 npm 进行安装。
npm install babel-cli babel-preset-env --save-dev
其中，babel-cli 是 Babel 的命令行工具，babel-preset-env 是 Babel 的预设环境，在这里我们将其安装在 devDependencies 中。
配置 Babel
安装完成后，我们需要配置 Babel，以便它能够理解我们要转换的代码。在项目根目录下创建一个 .babelrc 文件，用于存储 Babel 的配置信息。
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
------- ---------
-
--
-
-在这个配置中，我们指定了要使用的预设环境和目标环境。在这里，我们使用了 env 预设环境，并将目标环境设为当前的最新版 Node.js。
使用 Babel 转换代码
在配置完成后，我们就可以开始使用 Babel 将 ES6 代码转换成 CommonJS 模块了。在项目目录下创建一个 index.js 文件，用于存储我们的 ES6 代码。
// ES6 代码 export const add = (a, b) => a + b;
在这个代码中，我们定义了一个 add 函数，并使用 export 关键字将其导出为一个模块。
接下来，在命令行中输入以下命令，执行 Babel 的转换命令。
npx babel index.js --out-file index.commonjs.js
执行完成后，我们可以在项目目录下找到一个 index.commonjs.js 文件，其中存储了经过转换后的 CommonJS 模块代码。
-- -------------------- ---- ------- -- ---- -------- ---- ---- -------- ------------------------------ ------------- - ------ ---- --- ----------- - ---- -- ----- --- - --- -- -- - - -- ----------- - ----
在这个代码中，我们可以看到，export 关键字已经被转换成了 CommonJS 的 module.exports，而箭头函数也被转换成了函数表达式的形式。
使用转换后的 CommonJS 模块
最后，让我们看一下如何在 Node.js 中使用转换后的 CommonJS 模块。
我们可以在项目目录下创建一个 main.js 文件，用于引入转换后的模块。
// main.js 文件
const { add } = require('./index.commonjs');
console.log(add(1, 2)); // 3在这个代码中，我们使用了 CommonJS 的 require 方法引入了转换后的模块，并调用 add 函数计算了 1 + 2 的结果。
总结
使用 Babel 将 ES6 代码转换成 CommonJS 模块，可以让我们在更多的浏览器和 Node.js 环境中运行我们的代码。通过本文的介绍，我们可以学习到 Babel 的基本使用方法，以及如何创建和使用转换后的 CommonJS 模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b37cef48841e9894fc3696