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

Question

使用官方文档，我一直在尝试使用以下内容设置最佳构建配置：@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..

- publicJorn

Answer 1

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

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

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

---

现在，usage 和 entry 都由浏览器设置中的 @babel/core>=7.18 捆绑填充。

- taoliujun