简介
babel-preset-env 是 babel 官方推出的一个插件，它可以根据指定的配置，自动确定需要使用的 babel 插件，以及对应的 preset。
babel-preset-env 的主要作用在于根据配置自动转换 es6+ 的语法，帮助开发者在具有不同浏览器兼容性的场景下更方便地编写代码。
安装
使用 npm 即可安装：
$ npm install --save-dev babel-cli babel-preset-env
配置
在.babelrc（或 package.json 或 .babelrc.js）中增加如下配置：
-- -------------------- ---- -------
-
---------- -
-
------
-
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
-
-这里 targets 字段指定了我们需要兼容的浏览器，这里包含了最新两个版本的浏览器和 Safari 7+ 版本，当然你也可以根据需要设置。
示例代码
ES6+ 示例代码：
-- -------------------- ---- ------- -- ---- ----- -- - -- -- - ------------------ -------------------- - -- ---- ----- ------ ---- - ------ ------ ---- ---- -- --- - ----- -- --- --- - --- -- --- ------------
使用 babel-preset-env 转换后的代码：
-- -------------------- ---- -------
-- ----
--- -- - -------- ---- -
------------------ --------------------
--
-- ----
--- ---- - - ----- ------ ---- -- --
---- - ----------
--- - ---------
-- --- - ----- --
--- --- - --- -- ---
------------可以看到，在转换后的代码中，所有 ES6+ 的语法都被成功转换成了 ES5 这种较为广泛的语法。
总结
使用 babel-preset-env 插件可以轻松实现在不同浏览器下自动转换 es6+ 的语法，方便开发者编写更易维护、更易扩展的代码。同时，在实际开发中，还可以根据具体情况进行更精细化的配置，达到更灵活的转换效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482d26c48841e989422e6b9