什么是 Babel-cli？
Babel-cli 是 Babel 的命令行工具，能够将 ES6、ES7、JSX 等代码转换成浏览器或 Node.js 可识别的 ES5 代码。使用 Babel-cli，我们可以方便地将一个或多个文件或整个目录下的 ES6 代码编译成 ES5 代码。
如何使用 Babel-cli 编译整个目录下的 ES6 代码？
下面我们以一个前端项目为例，介绍如何使用 Babel-cli 编译整个目录下的 ES6 代码。
安装 Babel-cli
首先，需要全局安装 Babel-cli：
npm install -g babel-cli
安装必要的依赖
Babel-cli 依赖于 Babel 的核心模块 babel-core，以及 ES6 转换插件 babel-preset-env。因此，我们需要在项目中安装这些依赖：
npm install --save-dev babel-core babel-preset-env
创建 .babelrc 文件
接下来，我们需要在项目根目录下创建一个名为 .babelrc 的文件，用于 Babel 的配置。在 .babelrc 文件中，我们需要配置 Babel 使用哪些插件和预设。
例如，以下代码可以配置使用 babel-preset-env 和 babel-plugin-transform-runtime 插件：
{
"presets": ["env"],
"plugins": ["transform-runtime"]
}编译整个项目
完成上述配置后，我们可以使用 Babel-cli 来编译整个项目。在终端中切换到项目的根目录，然后执行以下命令：
babel src --out-dir dist
其中，src 是项目的源代码目录，dist 是编译后的代码目录。执行以上命令后，Babel-cli 会自动生成整个项目在 dist 目录下的 ES5 代码。
在项目中使用编译后的代码
最后，我们可以在项目中使用生成的 ES5 代码。例如，我们可以在 HTML 文件中引入编译后的 JavaScript 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- --- --------------- ------- ------ ------- ------------------------------ ------- -------
总结
本文介绍了如何使用 Babel-cli 编译整个目录下的 ES6 代码。通过 Babel-cli，我们可以快速、方便地将 ES6、ES7、JSX 等代码转化成浏览器或 Node.js 可识别的 ES5 代码，是前端开发人员必备的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ef8ce48841e9894b70fba