前言
在前端开发中，Babel 是一款非常重要的转码工具，可以将 ES6 及以上版本的代码转化成 ES5 代码，从而实现在目前大部分浏览器上运行。当 Babel 转码的时候，需要添加各种插件，而 babel-preset-env 就是其中一种处理预设的插件。 @mfjs/babel-preset-env 是在 babel-preset-env 的基础之上进行了二次封装，使用更加简单，本文将详细介绍该包的使用方法。
安装
在使用 @mfjs/babel-preset-env 之前，需要安装 Babel 和 @mfjs/babel-preset-env 包。
全局安装 Babel：
--- ------- -- -----------
安装 @mfjs/babel-preset-env 包：
--- ------- ---------------------- ----------
配置
在项目根目录下创建 .babelrc 文件，并添加以下配置：
-
---------- -
------------------------
-
-这里配置了 @mfjs/babel-preset-env 作为 Babel 的预设插件。
参数
@mfjs/babel-preset-env 支持以下参数：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| debug | boolean | false | 是否显示 debug 信息 |
| modules | string | auto | 定义转换后的模块化格式，可设置为 commonjs、amd 等等 |
| targets | Object | {} | 定义转换的环境 |
| useBuiltins | boolean | false | 是否开启全局垫片机制 |
| corejs | number | false | core-js 的版本 |
| loose | boolean | false | 是否使用松散模式的转换 |
| exclude | Array | [] | 排除的插件 |
| ignoreBrowserslistConfig | boolean | false | 是否忽略 Browserslist 配置文件，只在 targets 参数设置时有效 |
针对不同环境的目标，需要在 targets 参数中配置环境对应的浏览器版本或者 Node.js 版本，这里以浏览器环境为例：
-
---------- -
-------------------------- -
---------- -
--------- -----
----- ----
-
--
-
-这里设置了 chrome 58 和 ie 11 两种浏览器，Babel 将会把代码转化为这两种浏览器支持的 ES5 语法。
useBuiltins 参数设置之后可以开启全局垫片机制，从而减小打包体积，同时这个选项也需要单独安装 @babel/runtime 依赖。依赖安装：
--- ------- -------------- ----------
.babelrc 配置：
-
---------- -
-------------------------- -
-------------- -----
--------- -
--
-
-示例代码
----- --- - - -- -- -- - -- ----- - -- ------- - - ---- ------------------ -- - -- - -
这是 ES6 语法的解构赋值，可以将 obj 对象中的 a 读出来，并将剩余的内容放到 rest 变量中。运行在比较旧的浏览器（比如 IE11）中，会发生语法错误，不能运行，如果使用 Babel 转化，则无需手动去掉 ES6 语法，只需要配置好 @mfjs/babel-preset-env，Babel 就会自动转化为 ES5 语法：
---- --------
--- --- - -
-- --
-- -
--
--- - - ------
---- - ----------------------------------------- -------
------------------结束语
本文对于 npm 包 @mfjs/babel-preset-env 的使用进行了详细介绍，目的是帮助前端开发者更加快速、简单的使用该包，提高开发效率。在实际使用中，请根据自身项目的需求进行配置，避免引起不必要的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005539581e8991b448d0c92