什么是 babel-preset-env？
babel-preset-env 是一个用于 Babel 的预设，它可以根据目标环境（浏览器、Node.js）自动确定所需的插件，从而实现最小化的编译输出。如果您一直在为编译后的 JS 体积过大、性能不佳而苦恼，那么 babel-preset-env 或能为您解决烦恼。
babel-preset-env 的使用方法
安装
在安装 babel-preset-env 前，您需要先安装 @babel/core 和 @babel/preset-env。
npm install --save-dev @babel/core @babel/preset-env
配置
在.babelrc 配置文件中设置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- --- -- ----
-
-
-
-
-上述配置中，我们指定了目标浏览器为最新的两个版本和 IE11。babel-preset-env 会根据这个目标自动使用 Babel 插件来进行代码转换。
babel-preset-env 的特点
babel-preset-env 的特点是快速、准确。在速度方面，可以节省自己手动从众多插件中挑选合适的插件的时间；在正确性方面，它使用了一个叫做 babel-preset-env-data 的数据项目，其中包含了大量的浏览器数据，可确保插件列表的正确性。
babel-preset-env 的优化
以下是一些优化 babel-preset-env 的方法：
指定浏览器范围
我们可以使用 targets 参数指定需要支持的浏览器及其版本。这样能保证我们的输出代码仅仅包含对目标浏览器需要转换的语法和 API，避免过度的压缩，也能为它们保留更多的特性。
指定选项'loose'参数
loose 参数可以让 babel-preset-env 生成更小、更简单的代码。它使用 less 类型的对象表示层以实现更快的编译和优化输出。虽然一些精细的细节会有所损失，但在大多数情况下，这并没有影响到代码的正确性。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- - - --
-------- ----
-
-
-
-关闭模块转换
babel-preset-env 默认会将 ES6 模块转换为通用模块系统，如 CommonJS 或 AMD。如果您的项目正在使用 webpack 或 Rollup（它们自身支持 ES6 模块），那么可以将该选项设为 false：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- - - --
---------- -----
-
-
-
-示例代码
看一个示例，使用 babel-preset-env 编译代码，将 ES6 的箭头函数编译为普通函数：
-- -------------------- ---- ------- ----- --- - --- -- -- - ------ - - -- -- -- ----- ----- ------ ---- -------- --- --- - -------- ------ -- - ------ - - -- --
总结
babel-preset-env 旨在为开发人员提供更简洁和功能更强大的 Babel 预设，从而使他们可以轻松地编写更具互操作性的 JavaScript 代码。使用 babel-preset-env，我们可以更好地节省时间和精力，而不是手动地挑选和配置某个特定的插件，以适用于我们的项目中的所有可能的浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e369e6f6b2d6eab3edef16