Babel教程7：Babel配置文件

一、Babel教程7:Babel配置文件

在深入学习Babel配置文件之前，我们先了解其作用。无论是通过命令行工具babel-cli，还是构建工具如webpack进行编译，都需要配置文件来指定编译规则。Babel的配置文件是默认在当前目录寻找的文件，如.babelrc、.babelrc.js、babel.config.js和package.json。它们配置项相同，作用一致，选择其一即可。对于.babelrc文件，配置如下。babel.config.js和.babelrc.js通过module.exports输出配置项。在package.json中增加babel属性配置。观察这些配置文件，会发现配置项主要是plugins和presets。

配置文件的主要内容是配置plugins和presets数组，我们称其为插件数组和预设数组。除了plugins和presets，还有minified、ignore等配置项，但这些在日常使用中很少用到，因此建议专注于plugins和presets的学习。推荐使用后缀名js的配置文件，因为它可以使用JavaScript逻辑，更灵活。例如：

在配置文件中使用插件和预设时，要明确它们的作用。插件和预设分别位于plugins和presets数组中，是npm包。Babel提供了大量插件和预设，处理不同版本的ECMAScript标准。例如，处理ES2015、ES2018等。所有插件和预设在使用前需要先安装到node_modules中。

配置文件中的插件和预设数量众多，编写时可能会显得臃肿。为了解决这一问题，Babel提供了预设，预设是一组插件的集合，简化了配置。例如，babel-preset-es2015包含处理ES2015所需的所有插件。这样只需配置预设，而无需列出所有插件，减少了配置工作量。预设也可以是插件和其它预设的组合。

配置文件中的插件和预设可以使用短名称，如babel-plugin-前缀的插件，可以省略前缀。同样，预设名称前缀为babel-preset-或@xxx/babel-preset-xxx的可以省略部分前缀。但是，推荐使用全称以避免可能的混淆。

在配置文件的plugins插件数组和presets预设数组中，遵循一定的顺序规则。如果两个插件或预设需要处理同一段代码，那么将按照插件和预设的顺序执行。

每个插件或预设数组成员项默认为字符串形式，表示名称。若需设置参数，则将其转换为数组形式，包含插件或预设名称和参数对象。

综上所述，Babel配置文件的使用涵盖了插件、预设的配置以及参数设置等内容。在实际开发中，根据项目需求选择合适的插件和预设。后续教程将详细介绍如何在开发中选择适合的Babel插件和预设。

二、@babel/polyfill 中文翻译

自Babel 7.4.0起，推荐不再使用@babel/polyfill，而是直接导入core-js/stable以支持ECMAScript新功能，以及regenerator-runtime/runtime以使用转换后的生成器函数。Babel内置的polyfill包含定制的regenerator runtime和core-js，它模拟了ES2015+的环境，包括Promise、WeakMap、Array.from、Object.assign等特性。这些功能通过添加到全局环境和原型对象中来实现。

由于polyfill需要在源代码运行之前，所以应将其作为dependency而非devDependency。虽然提供了方便，但推荐配合@babel/preset-env和useBuiltIns选项使用，避免不必要的完整polyfill加载。若需使用非阶段4的TC39提案，需自行从core-js等其他polyfill库导入，@babel/polyfill未来可能单独提供这些特性。

在Node、Browserify或Webpack中使用时，应在应用入口文件顶部要求polyfill，确保其在其他代码之前执行。若使用ES6的import语法，也应在入口文件顶部导入。在Webpack中，有多种方式配置，建议根据需求手动导入需要的polyfill，而不是直接导入整个包。

在浏览器中，从@babel/polyfill的npm发布版dist/polyfill.js中获取polyfill，确保在编译后的Babel代码之前引入。你可以将其添加到编译代码前面，或者在HTML中单独引入。