简介
在前端开发中，使用 ES6+ 语法已经成为标配。然而，由于现代浏览器对 ES6+ 的支持程度不同，我们需要将代码转换成浏览器可兼容的 ES5 语法。这时候，Babel 就派上了用场。
start-babel 是一个基于 Babel 的 npm 包，可以快速地将 ES6+ 代码编译成 ES5 语法，方便我们在项目中使用。
安装
通过 npm 安装 start-babel：
npm install --save-dev start-babel
使用方法
配置文件
在项目根目录下新建 .babelrc 文件，用于配置 Babel。以下是一个简单的示例：
{
"presets": ["@babel/preset-env"]
}此处的 @babel/preset-env 表示使用 Babel 的最新版本进行转换。
更多关于 Babel 配置的内容，可以参考 Babel 官方文档。
命令行
在 package.json 中添加以下脚本：
{
"scripts": {
"build": "start-babel src --out-dir dist"
}
}其中，src 是待编译的源代码目录，--out-dir dist 表示将编译后的代码输出到 dist 目录下。执行命令：
npm run build
即可开始编译。
Node.js API
可以在 Node.js 中使用 start-babel 的 API 进行编译。以下是一个简单的示例：
const startBabel = require('start-babel');
startBabel({
input: 'src/index.js',
output: 'dist/index.js',
presets: ['@babel/preset-env']
});实战应用
下面通过一个实例来演示如何在项目中使用 start-babel。
假设我们有一个项目，结构如下：
├── package.json ├── src │ ├── index.js │ └── greeting.js └── dist
其中，index.js 是入口文件，引用了 greeting.js 中的代码：
import { greeting } from './greeting';
console.log(greeting('world'));greeting.js 中定义了一个 greeting 函数：
export const greeting = (name) => {
return `Hello, ${name}!`;
};为了让这份代码能够在浏览器中运行，我们需要将其转换成 ES5 语法。此时，我们就可以使用 start-babel 进行编译。
首先，在项目根目录下执行以下命令安装 start-babel：
npm install --save-dev start-babel
然后，在根目录下新建 .babelrc 文件，添加以下内容：
{
"presets": ["@babel/preset-env"]
}接着，在 package.json 中添加以下脚本：
{
"scripts": {
"build": "start-babel src --out-dir dist"
}
}现在，我们可以运行命令：
npm run build
即可将 src 目录下的代码编译成 ES5 语法，并输出到 dist 目录下。
最后，我们需要修改 index.html 文件，引用编译后的代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------ ------------ ------- ------------------------------- ------- ------ ------- -------
至此，我们已经成功地使用 start-babel 进行了一次编译。
总结
使用 start-babel 可以快速将 ES6+ 代码编译成浏览器可兼容的 ES5 语法。在实际项目中
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43966