详解 Babel-preset-env 的使用方法
Babel 作为 JavaScript 的转译器，常常被用于处理一些在当前浏览器或环境下并不支持的语法或特性。而 Babel-preset-env 则是一个针对不同环境（如浏览器、Node.js 等）自动启用需要的插件和语法转换器的 Babel 预设。
安装
使用 npm 进行安装：
npm install --save-dev babel-preset-env
配置
在 .babelrc 或者项目的 package.json 文件中添加 preset：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- --- -- ---
-
--
-
-其中 targets.browsers 配置了目标浏览器的版本，这里的 "last 2 versions" 指的是最新的两个稳定版本，而 "IE >= 9" 表示大于等于 IE9 的浏览器版本。如果目标是 Node.js，可以在 targets 中指定 "node" 属性。
同时，preset 还支持许多其他的选项，如：
- debug：输出预设的调试信息
- useBuiltIns：根据目标环境自动添加需要的 polyfills
- modules：指定 ES6 模块的转译方式
- loose：是否启用松散模式
示例代码
下面是一个使用了 Babel-preset-env 的示例代码：
-- -------------------- ---- -------
-- -------- -----------
----- --------- - ----- ----- -- -
----- -------- - ----- -----------
-- ------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- --- -------------- -------- --- --- ------
-
-通过 Babel 转换后：
-- -------------------- ---- -------
---- --------
-- -------- -----------
--- --------- - -------- -- -
--- ---- - ------------------ --------------------------------------------- ------------ -
--- --------- -----
------ --------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ -------------------------------------
---- --
-------- - --------------
-- ------------- -
------------- - --
------
-
----- --- -------------- -------- --- --- ------
---- --
------------- - --
------ ------------------------------------------
---- --
---- - --------------
------ ------------------------- ------
---- ---
---- ------
------ ----------------
-
-
-- ----- ------
----
------ -------- ------------- -
------ ---------------- -----------
--
----从上面的代码可以看出，在不同的目标浏览器下，Babel-preset-env 会自动启用相应的插件和语法转换器，使得代码能够在更多环境下正常运行。
总结
Babel-preset-env 可以自动根据目标浏览器和环境启用需要的插件和语法转换器，可以极大地简化配置和管理，帮助开发者快速部署和优化项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6530ea017d4982a6eb27bee0