前言
现在的前端开发，使用了越来越多的 ES6+ 的语言特性，例如模块化 import/export，箭头函数，Promise 等等。但是这些高级特性在一些老旧的浏览器中可能不被支持，需要使用 babel 把这些代码转换为浏览器可以识别的 ES5 的代码。
然而，babel 处理转换的工作非常耗费时间和性能，我们需要一个快速且更加智能的工具来确保代码的兼容性和性能。这就是为什么我们需要 babel-preset-env 这个工具来一次性解决这些问题。
这篇文章将详细讲解 babel-preset-env 的使用方法和相关配置，帮助大家更好地处理转码问题。
什么是 babel-preset-env
babel-preset-env 是一个智能配置 babel 转码的 preset。preset 是一系列 plugins 的集合，用于转码 ES 特性为通用的 JavaScript 代码。
babel-preset-env 可以通过配置选项为目标环境提供目标特性的兼容性填补缺失插件和进行优化，从而让我们的代码更加精简和高效。
如何使用 babel-preset-env
安装和配置
- 安装 babel-cli 和 babel-preset-env：
npm install babel-cli babel-preset-env --save-dev
- 创建一个
.babelrc文件并配置babel-preset-env-- -------------------- ---- ------- - ---------- - ------- - ---------- - ----------- ------ - ---------- - -- - -上面的配置表示转换 ES6+ 代码为支持last 2 versions最新两个主流浏览器的 JavaScript 代码。
示例代码
假设我们有下面的 ES6+ 代码：
const sayHello = (name) => {
console.log(`Hello, ${name}`);
}
export default sayHello;按照上面的配置，使用 babel-cli 可以这样编译成浏览器可以识别的 ES5 代码：
babel src --out-dir dist
编译后的代码如下所示：
-- -------------------- ---- ------- ---- -------- ------------------------------ ------------- - ------ ---- --- --- -------- - -------- -------------- - ------------------- - - ------ -- --------------- - ---------
如何优化性能
babel-preset-env 默认只包含了一组 plugins，这意味着转换器可能会生成很多不必要的代码或者遗漏一些关键的 JavaScript 特性。为了实现更好的性能和控制，我们可以对 preset 进行自定义配置。
下面是一些优化建议：
使用 browserslistTargets 配置项
建议使用统一的浏览器列表，通过
browserslistTargets配置来指定转换目标。{ "browserslistTargets": { "browsers": ["last 2 versions", ">1%"] } }这个配置会启用特定于目标浏览器的 polymorphic 模式，以便只采用特定于浏览器的转换插件，从而提高编译速度和性能。
移除不必要的插件
通过移除不必要的插件来提高性能，只加载我们真正需要的插件。例如，在某个特定版本的浏览器中，转换器可能不需要转换箭头函数、async/await 或者 decorator 等特性，这时候我们可以使用如下配置：
{ "exclude": [ "transform-regenerator", "transform-async-to-generator" ] }这个配置会让编译器不加载 regenerator 和 transform-async-to-generator 插件，因为这些浏览器已经原生支持 async/await。
重新定位 polyfills
为了确保更加正确的 polyfill 注入，我们可以使用 corejs 特性。使用这个库，我们可以更容易地定义需要什么样的 polyfill，同时避免加载我们实际上并不需要的 polyfill。
{ "useBuiltIns": "usage", "corejs": 3.0 }开启 experimental plugins
babel-preset-env 为一些实验特性提供了支持。这些特性可能在未来版本不再维护或者不再被添加到 ES 规范中，但如果你需要使用这些特性，你可以开启这些 experimental plugins 的支持。
{ "include": [ "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-nullish-coalescing-operator" ] }这个配置会引入
optional-chaining和nullish-coalescing-operator插件，它们现在还不是 ES 规范中的标准特性，但适合用作实验性操作或 polyfill。
总结
babel-preset-env 是一个非常有用的转换工具，可以帮助我们更好地处理转码问题。通过符合目标环境的策略来声明、分析和处理特定的转换插件和 polyfills，我们可以在不影响代码质量和性能的情况下，尽可能地实现跨浏览器平台的特性兼容。
希望通过本文能够帮助大家更好地理解和使用 babel-preset-env，并为前端开发过程中的转码问题提供解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b090a968c7c53b0d65618