Babel 6 配置详解
Babel 是一个 JavaScript 编译器，可以将 ES6+ 的代码转换成 ES5 的代码，从而使得我们可以在现有的浏览器和环境中运行新的 JavaScript 代码。Babel 6 是 Babel 的一个重大升级，它带来了很多新的特性和改进。在本文中，我们将深入探讨 Babel 6 的配置，让你能够更好地使用 Babel 6。
为什么需要配置 Babel 6？
Babel 6 默认会转换 ES6+ 代码，但是不同的项目和场景需要不同的转换规则。比如，有些项目可能需要支持更老的浏览器，这时候就需要将 ES6+ 代码转换成更旧的语法。而有些项目可能需要使用一些特定的语法，比如 JSX 或 Flow，这时候就需要配置 Babel 6 让它能够正确地转换这些语法。因此，配置 Babel 6 是非常重要的。
Babel 6 的配置文件
Babel 6 的配置文件是一个名为 .babelrc 的 JSON 文件，它用于指定 Babel 的转换规则。下面是一个简单的 .babelrc 文件的例子：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ----------
-
--
-
-这个配置文件的意思是，使用 env 预设来转换代码，并且指定目标浏览器是最近两个版本的浏览器。如果你不了解预设和插件的概念，可以先阅读一下 Babel 的文档。
使用 env 预设
env 预设是 Babel 6 中最常用的预设之一，它可以根据目标浏览器或 Node.js 版本来自动选择需要的转换规则。在上面的例子中，我们使用了 env 预设，并且指定了目标浏览器是最近两个版本的浏览器。这意味着 Babel 6 会自动根据这个目标浏览器来选择需要的转换规则。
使用插件
除了预设之外，Babel 6 还支持使用插件来进行转换。插件是一种更细粒度的配置方式，可以针对具体的语法进行转换。比如，如果你想使用 JSX 语法，就需要使用 babel-plugin-transform-react-jsx 插件。下面是一个使用插件的例子：
{
"plugins": [
"transform-react-jsx"
]
}这个配置文件的意思是，使用 transform-react-jsx 插件来转换 JSX 语法。如果你要使用其他的插件，只需要将插件的名称添加到 plugins 数组中即可。
使用 Polyfill
Babel 6 还提供了一个非常有用的功能，就是可以自动添加 Polyfill。Polyfill 是一种 JavaScript 库，可以让旧的浏览器支持新的 JavaScript 特性。如果你的代码中使用了一些新的 JavaScript 特性，而你又需要支持旧的浏览器，那么就需要使用 Polyfill。
Babel 6 可以自动为你添加 Polyfill，你只需要在配置文件中指定需要的 Polyfill 即可。下面是一个使用 Polyfill 的例子：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ----------
--
-------------- ----
--
-
-这个配置文件的意思是，使用 env 预设来转换代码，并且指定目标浏览器是最近两个版本的浏览器。同时，使用 useBuiltIns 选项来自动添加需要的 Polyfill。
结论
Babel 6 是一个非常强大的 JavaScript 编译器，可以让我们使用新的 JavaScript 特性，同时还能够支持旧的浏览器。配置 Babel 6 是非常重要的，可以让我们根据不同的项目和场景来选择需要的转换规则。在本文中，我们介绍了 Babel 6 的配置文件，以及使用 env 预设、插件和 Polyfill 的方法。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bd3b14f6c48c9382e9ea4