前言
在前端开发领域，你经常会遇到需要应对不同的浏览器支持，而不同的浏览器又有着不同的 ECMAScript 规范支持情况，这就导致开发者需要写出大量兼容性代码来应对不同的情况。
并且在前端开发中，还会有一些新的语言特性和新的 API 的引入，而这些还未得到所有浏览器的支持，这就需要在开发时使用转换工具来进行转换处理。
而 Babel 是一个 JavaScript 转换工具，它能够将 JavaScript 代码转换为浏览器支持的代码。在这篇文章中，我们将一起探讨 Babel 的使用方法以及它的作用。
Babel 的作用
由于不同浏览器对 JavaScript 的支持情况不同，因此在开发过程中就不可避免地需要处理兼容性问题，而 Babel 就能够解决这个问题。
Babel 可以将新的 JavaScript 语言特性转换为浏览器可识别的语言特性（如 ES6 转换为 ES5），实现浏览器兼容性的问题。
此外，Babel 还可以让开发者自定义的转换规则，用来实现一些比较复杂的语言特性转换。
开始使用 Babel
在学习 Babel 之前，需要先安装一下 Babel Core：
npm install --save-dev @babel/core
接下来，我们可以安装一些相关的插件和 preset，例如：
@babel/preset-env: 提供除了 JSX 之外所有的转换规则，以及根据不同环境引入不同的 Polyfill。@babel/preset-react: 用于将 JSX 转换为 React.createElement()。
npm install --save-dev @babel/preset-env @babel/preset-react
安装完插件之后，我们需要在 .babelrc 或 package.json 中配置相关信息。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}这里使用了 @babel/preset-env 和 @babel/preset-react。
现在，我们可以编写代码并使用 Babel 进行转换了。
// index.js
const hello = () => console.log('Hello World!');
hello();然后使用命令行输入以下命令进行转换：
npx babel index.js -o output.js
输出的代码将会是下面这样：
"use strict";
var hello = function hello() {
return console.log('Hello World!');
};
hello();可以看到，原本使用了箭头函数的代码经由 Babel 的转换已经是一个函数声明，这样就可以兼容到比较旧的浏览器了。
自定义 Babel 插件
除了预定义的 preset 和 plugin 之外，我们还可以自定义 Babel 插件来完成一些自定义的转换规则。
首先，我们需要创建一个新的 npm package，然后安装 Babel Core 和一个新的 plugin。
npm install --save-dev @babel/core npm install --save-dev babel-plugin-my-plugin
首先需要创建一个新的目录，并在该目录内创建 index.js 文件以及 package.json。
package.json:
-- -------------------- ---- -------
-
------- ------------
---------- --------
-------------- --- ------ ----- --------
------- -----------
---------- -
------- ----- -------- -- ---- ----------- -- ---- ---
-------- ------ --- -- ----
--
----------- -
---------------
-----------
--
---------- ------
------------------ -
-------------- ---------
-
-接着编写 index.js:
-- -------------------- ---- -------
-------------- - -------- ---------- -
------ -
-------- -
---------------- -
----- ---- - ---------------
-- ----- --- ------ -
-------------- - ------
-
-
-
--
-这个插件作用是将 js 代码中的 foo 字面串替换为 bar。
现在可以在命令行中使用以下命令来使用插件：
npx babel src --plugins ./my-plugin.js --out-dir lib
这里的 --plugins 标志指定自定义插件的位置，而 --out-dir 指定输出目录。
总结
在本文中，我们讲了 Babel 的作用以及如何安装和配置 Babel。并且我们还自定义了一个 Babel 插件实现了简单的转换操作。
有了 Babel，开发者就能够更便捷地处理浏览器兼容性问题并使用新的 JavaScript 语言特性，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f05b0968c7c53b01235fd