@babel/preset-env

Babel

@babel/preset-env 是一组提供最新 JS 语法 transforms 和可选的浏览器 polyfill 的预设。

安装

pn add @babel/preset-env -D

原理

借助 browserslist/compat-table/electron-to-chromium，维护一套目标版本-JS语法支持的映射，同时引入 core-js 的 polyfill。

browserslist集成

可以通过 .browserslistrc 文件或在 @babel/preset-env 配置 targets 来指定目标浏览器版本（targets 还可以配置除了浏览器的其他环境）

如果配置了 targets，.browserslistrc 会被忽略

例如：

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

# .browserslistrc
> 0.25%
not dead

或者 package.json

"browserslist": "> 0.25%, not deat"

配置

targets

Type: string | Array<string> | { [string]: string }

描述项目支持的环境。

可以是 browserslist-compatible 的字符串：

{
    "targets": "> 0.25%, not dead"
}

或是一个最小的环境版本对象：

{
    "targets": {
        "chrome": "58",
        "ie": "11"
    }
}

不指定的时候，babel 会默认需要支持所有浏览器，从而使用所有转换成 es5 代码需要的 transform 和 polyfill。

targets.esmodules

指定支持 esmodules 的浏览器，会和其他 targets 取交集。

在提供 <script type="module"></script> 使用的轻量脚本时好用。

modules

可选值：

• amd
• umd
• systemjs
• commonjs
• auto，默认值
• false

将 ES module 语法转换成其他 module 语法；false 会保留 ES module 语法。

include / exclude

一组需要包含/去除的 babel plugins

useBuiltIns

可选值：

• usage
• entry
• false，默认值

配置 @babel/preset-env 怎么处理 polyfill。

"usage" 会把每个文件使用到的特性按需引入；"entry" 会把所有 import "core-js/stable" 和 require('core-js') 替换成当前环境需要的单独特性导入；

corejs

只有在 useBuiltIns 为 "usage" 或 "entry" 时有效，指定 core-js 的版本