Question

我有一个与webpack捆绑在一起并使用babel的ES6 React应用程序。我正在配置babel-preset-env，因为节点一切正常，但对于浏览器，无论目标百分比如何，我的构建大小都不会改变。当间隔> 1或其90％时，大小相同。

网络包版本为1.13.1，我的正文版本6.26.0和babel-preset-env版本为1.6.1

我在.babelrc

中有这个

{
  "presets": [
    "es2015",
    "stage-0",
    "react",
    [
      "env",
      {
        "targets": {
          "node": "9.4.0",
          "browsers": [
            ">1%"
          ]
        }
      }
    ]
  ],
  "plugins": [
    [
      "transform-class-properties",
      "transform-runtime",
      "transform-decorators-legacy",
      "react-intl",
      {
        "messagesDir": "./build/messages",
        "enforceDescriptions": false
      }
    ]
  ]
}

Answer 1

使用babel-preset-env时，它将根据您的目标浏览器列表决定仅包含必要的babel变换。

它是es2015和stage-0的替代方法，并且将这些预设与env一起使用会适得其反，因为无论需要还是需要使用这些预设中包含的转换，不。

这还取决于您使用babel-polyfill的方式。在JavaScript条目文件的开头将其设置为import 'babel-polyfill'，babel-preset-env将用单个导入替换导入，仅使用目标浏览器所需的polyfill。

如果您将babel-polyfill作为Webpack entry选项的一部分包括在内，例如，

，我不确定是否可行

js entry: { myentry: ['babel-polyfill', 'js/index.js'] }

希望这可以帮助您减小捆绑包的尺寸！

P.S。在描述您需要做的事情时，我知道babel-preset-env documentation is not the clearest。

Answer 2

确保您的import "@babel/polyfill";中有index.js。

此外，请确保仅导入一次。如果您有这样的东西

entry: ["@babel/polyfill", path.join(__dirname, "./src/index.js")],

在您的webpack配置中，移动polyfill，所以它应该看起来像

entry: path.join(__dirname, "./src/index.js")

babel-preset-env不改变构建大小

2 个答案: