babel 预设

@babel/preset-env 的使用

babel 有多种预设，最常见的预设是@babel/preset-env

@babel/preset-env可以让你使用最新的 JS 语法，而无需针对每种语法转换设置具体的插件

下载

pnpm i -D @babel/preset-env

配置

json

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

兼容的浏览器

@babel/preset-env需要根据兼容的浏览器范围来确定如何编译，和 postcss 一样，可以使用文件.browserslistrc来描述浏览器的兼容范围

last 3 version
> 1%
not ie <= 8

自身的配置

和postcss-preset-env一样，@babel/preset-env自身也有一些配置

具体的配置见：https://www.babeljs.cn/docs/babel-preset-env#options

配置方式是：

json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "配置项1": "配置值",
        "配置项2": "配置值",
        "配置项3": "配置值"
      }
    ]
  ]
}

其中一个比较常见的配置项是useBuiltIns，该配置的默认值是 false

它有什么用呢？由于该预设仅转换新的语法，并不对新的 API 进行任何处理

例如：

new Promise((resolve) => {
  resolve();
});

转换的结果为

new Promise(function (resolve) {
  resolve();
});

如果遇到没有 Promise 构造函数的旧版本浏览器，该代码就会报错

而配置usebuiltins可以在编译结果中注入这些新的 API，它的值默认为false，表示不注入任何新的 API，可以将其设置为usage，表示根据 API 的使用情况，按需导入 API

json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

同时需要将另外两个库安装：(安装到生产依赖中)

#corejs实现了一些新的API转换,babel编译的时候会从这里去引入
pnpm i core-js -S
#regenerator-runtime支持了一些特殊的语法,比如async等
pnpm i regenerator-runtime -S

实践

我们看一下 babel 编译之后的结果：

const a = 10;

//preset预设只会转换新的语法，并不会对新的API进行转换,对新的API进行转换需要依赖corejs
new Promise((resolve) => {
  resolve();
});

编译:

"use strict";

//不自己构建，而是依赖了corejs这个库
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.promise.js");
var a = 10;

//preset预设只会转换新的语法，并不会对新的API进行转换,对新的API进行转换需要依赖corejs
new Promise(function (resolve) {
  resolve();
});

我们到时候只需要根据控制台提示来完善该插件所需的依赖即可。

babel 预设 ​

@babel/preset-env 的使用 ​

实践 ​

babel 预设

@babel/preset-env 的使用

实践