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

Question

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

webpack版本是1.13.1，我的巴别塔版本是6.26.0，巴别塔预置环境版本是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将用单个导入替换导入，而只使用目标浏览器所需的多边形填充替换导入。

我不确定如果您将babel-polyfill作为Webpack entry选项的一部分，它是否会以这种方式工作，例如：

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

希望这能帮助你减小捆绑包的大小！

附注:当涉及到描述你需要做的事情时，我知道babel-preset-env documentation is not the clearest。

Answer 2

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

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

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

在您的webpack配置中，移动polyfill，使其看起来像

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