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

Posted 2023-02-19

【中文标题】preset-env 和 core-js 似乎没有使用 browserslist

【英文标题】：preset-env and core-js don't seem to use browserslist

【发布时间】：2019-09-07 13:41:48

【问题描述】：

使用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..

【参考方案1】：

如果 useBuiltIns 被使用，则始终使用捆绑的 polyfill。

如果 useBuiltIns 是 entry，它将通过 browserslist 捆绑 polyfill。不要忘记导入 core-js 手册，例如

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

但它应该捆绑未使用的 polyfill，因为它只是捆绑在您的浏览器列表中。