Babel 基础使用指南：从安装到编译的完整流程

Babel 是当今前端开发中不可或缺的工具，它允许开发者使用最新的 JavaScript 特性，同时确保代码能在各种浏览器和环境中运行。本文将带你从零开始学习 Babel 的基础使用，涵盖安装、配置到实际编译的全过程。

1. 安装 Babel 和插件

首先，我们需要在项目中安装 Babel 的核心包和命令行工具。

# 使用 npm 安装
npm install --save-dev @babel/core @babel/cli# 或者使用 yarn
yarn add --dev @babel/core @babel/cli

@babel/core 是 Babel 的核心功能包，而 @babel/cli 则允许你从命令行使用 Babel。

接下来，根据你的需求安装必要的插件或预设（preset）。预设是一组插件的集合，可以简化配置。最常用的是 @babel/preset-env：

npm install --save-dev @babel/preset-env

2. 创建 Babel 配置文件

Babel 需要配置文件来确定如何转换代码。常见的配置方式有三种：

1. 项目根目录的 babel.config.json 文件，适用于整个项目；

2. .babelrc.json 文件，适用于项目的一部分；

3. package.json 中的 babel 键；

我们创建一个 babel.config.json 文件：

{"presets": [["@babel/preset-env", // 使用 @babel/preset-env 预设{"targets": { // 针对特定浏览器版本进行转换"edge": "17","firefox": "60","chrome": "67","safari": "11.1"},"useBuiltIns": "usage", // 按需引入 polyfill "corejs": "3.6.5" // 使用 core-js 3 版本作为 polyfill 源}]]
}

3. 编写待转换代码文件

创建一个包含现代 JavaScript 语法的文件，例如 src/main.js：

// 箭头函数
const greet = (name) => {return `Hello, ${name}!`;
};// 类属性
class Person {name = 'John';sayHello = () => {console.log(greet(this.name));};
}// Promise 和 async/await
async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}// 可选链操作符
const user = {profile: {name: 'Alice'}
};
console.log(user?.profile?.name);// 使用数组的 includes 方法
const colors = ['red', 'green', 'blue'];
console.log(colors.includes('green'));

4. 执行编译

配置好 Babel 后，可以通过命令行工具执行编译。在 package.json 中添加一个脚本：

{"scripts": {"build": "babel src -d lib"}
}

这个命令会将 src 目录下的所有文件转换后输出到 lib 目录。

运行编译：

npm run build

你也可以直接在命令行中运行：

npx babel src --out-dir lib

编译完成后，你会在 lib 目录下看到转换后的代码，这些代码已经转换为兼容目标浏览器的 ES5 语法。

5. 常用插件与预设

5.1. 常用预设

1. @babel/preset-env：根据目标环境自动确定需要的转换和 polyfill；

2. @babel/preset-react：转换 React 的 JSX 语法；

3. @babel/preset-typescript：转换 TypeScript 代码；

5.2. 常用插件

1. @babel/plugin-transform-runtime：重用 Babel 的辅助代码，减少代码体积；

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

2. @babel/plugin-proposal-class-properties：支持类属性语法；

npm install --save-dev @babel/plugin-proposal-class-properties

3. @babel/plugin-proposal-object-rest-spread：支持对象展开运算符

npm install --save-dev @babel/plugin-proposal-object-rest-spread

5.3. 插件与预设的配置示例

{"presets": ["@babel/preset-env"],"plugins": [["@babel/plugin-transform-runtime", {"corejs": 3}],"@babel/plugin-proposal-class-properties"]
}

6. 总结

通过以上步骤，你已经掌握了 Babel 的基础使用方法：

1. 安装必要的 Babel 核心包和插件/预设；

2. 创建适合项目需求的 Babel 配置文件；

3. 编写使用现代 JavaScript 语法的源代码；

4. 执行编译将代码转换为兼容性更好的版本；

5. 根据项目需求选择合适的插件和预设；

Babel 的强大之处在于它的可配置性和丰富的插件生态，随着项目复杂度的增加，你可以进一步探索更多高级配置和优化选项，如自定义插件、代码压缩等。