npm 包 @mfjs/babel-preset-env 使用教程

前言

在前端开发中，Babel 是一款非常重要的转码工具，可以将 ES6 及以上版本的代码转化成 ES5 代码，从而实现在目前大部分浏览器上运行。当 Babel 转码的时候，需要添加各种插件，而 babel-preset-env 就是其中一种处理预设的插件。 @mfjs/babel-preset-env 是在 babel-preset-env 的基础之上进行了二次封装，使用更加简单，本文将详细介绍该包的使用方法。

安装

在使用 @mfjs/babel-preset-env 之前，需要安装 Babel 和 @mfjs/babel-preset-env 包。

全局安装 Babel：

npm install -g @babel/core

安装 @mfjs/babel-preset-env 包：

npm install @mfjs/babel-preset-env --save-dev

配置

在项目根目录下创建 .babelrc 文件，并添加以下配置：

{
  "presets": [
    "@mfjs/babel-preset-env"
  ]
}

这里配置了 @mfjs/babel-preset-env 作为 Babel 的预设插件。

参数

@mfjs/babel-preset-env 支持以下参数：

针对不同环境的目标，需要在 targets 参数中配置环境对应的浏览器版本或者 Node.js 版本，这里以浏览器环境为例：

-- -------------------- ---- -------
-
  ---------- -
    -------------------------- -
      ---------- -
        --------- -----
        ----- ----
      -
    --
  -
-

这里设置了 chrome 58 和 ie 11 两种浏览器，Babel 将会把代码转化为这两种浏览器支持的 ES5 语法。

useBuiltins 参数设置之后可以开启全局垫片机制，从而减小打包体积，同时这个选项也需要单独安装 @babel/runtime 依赖。依赖安装：

npm install @babel/runtime --save-dev

.babelrc 配置：

{
  "presets": [
    ["@mfjs/babel-preset-env", {
      "useBuiltins": true,
      "corejs": 3
    }]
  ]
}

示例代码

const obj = { a: 1, b: 2 };
const { a, ...rest } = obj;
console.log(rest); // { b: 2 }

这是 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