2

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

webpack 版本是1.13.1，我的 babel 版本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
      }
    ]
  ]
}
4

2 回答 2

0

当你使用babel-preset-env它时，它会根据你的目标浏览器列表决定只包含必要的 babel 转换。

es2015它是and的替代方法stage-0，并且包含这些预设env会适得其反，因为无论是否需要，都将应用这些预设中包含的变换。

这也取决于您如何使用babel-polyfill. 将其设置为import 'babel-polyfill'JavaScript 入口文件的开头，并将babel-preset-env导入替换为单独的导入，其中仅包含目标浏览器所需的 polyfill。

如果您将babel-polyfill其作为 Webpack选项的一部分包含在内，我不确定它是否可以正常工作entry，例如：

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

希望这将帮助您减小捆绑包的大小！

PS 我知道在描述你需要做的事情时，babel-preset-env 文档并不是最清楚的。

于 2018-08-26T08:29:05.730 回答
0

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

另外，请确保您只导入一次。如果你有这样的事情

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

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

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

于 2019-04-01T20:15:46.333 回答