Babel-preset-env 是一个在 Babel 中使用的预设环境，它可以根据你的 target 自动进行的 polyfill 和转译。
本篇文章主要介绍 Babel-preset-env 的常见用法及实际案例分享，希望对前端开发者有所帮助。
安装
使用 npm 安装 Babel-preset-env：
npm install --save-dev @babel/preset-env
配置
Babel-preset-env 的配置项非常多，以下是一些常见的配置示例：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- ------ -- ------------ --- -----
-------- ----- -- -------------------------
-------------- -------- -- ------- ---------
--------- -- -- ---- ----------
---------- - -- ----------
--------- -----
----- ----
-
-
-
-
-以上为常用的 Babel-preset-env 配置项，下面我们详细讲述其中的几个配置项的含义。
modules
false：禁用模块转换，保留原来的 ES6 模块语法。"commonjs"：将模块转换为 CommonJS。
loose
true：更宽松的转换。这对于代码可能会改变的插件特别有用。false：更严格的转换。
useBuiltIns
false：不会引入任何 polyfill。"entry"：通过entry配置来引入 polyfill。"usage"：通过检测目标环境来引入 polyfill，按需加载需要的 polyfill。
corejs
false：不引入 core-js。2：引入 core-js@2。3：引入 core-js@3。
targets
通过 targets 来指定需要支持的环境。
实际案例
以下为一个实际案例。测试该案例前，请在终端中安装 Babel-cli、Babel-preset-env 和 core-js：
npm install -g babel-cli npm install --save-dev @babel/preset-env npm install --save core-js@3
在终端中输入以下命令：
babel index.js --presets @babel/preset-env -o dist.js
即可将 index.js 文件转换成 ES5 语法并保存到 dist.js 文件中。
以下为 index.js 文件的代码：
-- -------------------- ---- ------- ----- --- - --- -- -- -- --- ---------------- ----- --- - - -- -- -- -- -- -- -- ----- ------ - - ------ -- ----- ------- - ------------------ ------------------
输出的 dist.js 代码如下：
-- -------------------- ---- ------- ---- -------- --- ---------------------- - -------------------------------------------------------- ------------------------------------------------ -------------------------------------------------- ------------------------------------------------- ---------------------------------------------------------- -------------------------------------------------------- -------------------------------------------------------------------- --------------------------------------------------------------------- --------------------------------------------- ----------------------------------------------- --- -------------- - ------------------------------------------------------------------------ --- --- - --- -- -- -- --- ---------------- --- --- - - -- -- -- -- -- - -- --- ------ - --- --------------------------- ----- --- ------- - ------------------ ------------------
以上代码中，Babel-preset-env 自动根据 target 添加了相应的 polyfill，让代码能在低版本的浏览器中运行。
总结
本篇文章主要介绍了 Babel-preset-env 的常见用法及实际案例分享。通过 Babel-preset-env，我们可以轻松地将 ES6+ 语法转换为 ES5 语法，并提供了方便的配置项使得我们可以选择需要的 polyfill 和转换方式，让我们在开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649eab3f48841e9894b36d02