javascript - preset-env 和 core-js 似乎没有使用 browserslist

Question

使用 official docs我一直在尝试使用以下命令设置最佳构建配置:@babel/preset-env和 core-js与 .browserslist文件。

据我了解文档，他们说 preset-env与 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

import 'core-js/stable'

// etc..

Answer 1

如果属性 useBuiltIns是 usage , core-js 将捆绑你在项目中使用的 polyfill 代码。
如果 useBuiltIns是 entry ，它将通过 browserslist 设置捆绑 polyfill 代码。不要忘记手动导入 core-js。

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

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