预设环境和核心js似乎不使用浏览器列表

Question

使用官方的文档我一直在试图安装使用最佳构建配置：@babel/preset-env和core-js一个.browserslist文件。

据我了解的文档，他们说preset-envwith useBuiltins:"usage"将更新import 'core-js/stable'我的代码中的语句，仅包含必需的功能。

但是，无论我设置last 1 chrome version还是>1% in NL（使用的浏览器都很多，并且版本都比较旧），构建文件的大小都是相同的（大约3MB）。

我想念什么？

我在这里有一个测试仓库：https : //github.com/publicJorn/jorns-react-starter

为了快速参考，相关文件：

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ],
    ["@babel/plugin-proposal-class-properties"],
    ["@babel/plugin-syntax-dynamic-import"],
    ["babel-plugin-styled-components"]
  ]
}

webpack部分

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },

.browserslistrc

> 1% in NL
ie 11
not ie < 11

index.js

> 1% in NL
ie 11
not ie < 11

Answer 1

如果属性useBuiltIns是usage，core-js 将捆绑您在项目中使用的填充代码。

如果useBuiltIns是entry，它将通过 browserslist 设置捆绑填充代码。不要忘记手动导入 core-js 。

import 'core-js/stable';
import 'regenerator-runtime/runtime';

现在，usage和entry都是通过上面的浏览器设置捆绑的polyfill@babel/core>=7.18