配置babel-preset-env后浏览器构建包大小未改变的问题

嘿，我来帮你搞定这个包大小没变化的问题！结合你的配置和环境，核心问题其实挺明确的，咱们一步步拆解：

问题根源 #

1. 冲突的Preset配置
   你同时在.babelrc里加了es2015和babel-preset-env，这俩是互斥的！es2015会强制把所有ES6+语法全转成ES5，不管你的目标环境是什么，直接覆盖了babel-preset-env的按需转换逻辑——这就导致不管你给浏览器设置多少百分比的目标，最终都是全量转换，包大小自然不会变。

2. 浏览器目标未配置
   你的babel-preset-env只设置了node: "9"的目标，完全没给浏览器环境指定任何规则，浏览器构建时其实根本没用到env的自适应能力，还是跟着es2015在走全量转换。

具体修复步骤 #

第一步：移除冗余的es2015 Preset

直接把.babelrc里的"es2015"删掉，babel-preset-env已经完全能替代它的功能，而且更智能。

第二步：给env添加浏览器目标配置

你可以根据需求选择两种配置方式：

方式1：统一配置Node+浏览器目标

适合不需要区分环境构建的场景，修改后的.babelrc如下：

{
  "presets": [
    "stage-0",
    "react",
    [
      "env",
      {
        "targets": {
          "node": "9",
          "browsers": ["> 1%", "last 2 versions"] // 这里可以换成你需要的百分比，比如"> 90%"
        },
        "useBuiltIns": "usage", // 按需加载polyfill，进一步减小包体积
        "debug": true // 开启debug模式，构建时会输出env加载的插件列表，方便验证配置是否生效
      }
    ]
  ]
}

方式2：分环境单独配置

如果需要分别构建Node和浏览器版本，可以用.babelrc的env字段区分：

{
  "presets": ["stage-0", "react"],
  "env": {
    "node": {
      "presets": [
        ["env", {
          "targets": { "node": "9" },
          "debug": true
        }]
      ]
    },
    "browser": {
      "presets": [
        ["env", {
          "targets": { "browsers": "> 90%" },
          "useBuiltIns": "usage",
          "debug": true
        }]
      ]
    }
  }
}

这种方式需要在Webpack构建时通过DefinePlugin指定环境，比如浏览器构建时添加：

plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('browser')
  })
]

第三步：验证配置生效

开启debug: true后，运行构建命令时，控制台会输出babel-preset-env针对当前目标环境加载的所有插件列表。你切换browsers的百分比后，就能看到插件数量的变化，对应的包大小也会跟着改变。

额外注意 #

因为你用的是Webpack 1.x，要确保babel-loader的版本是7.x（对应Babel 6），不要装更高版本，否则会出现兼容性问题。

内容的提问来源于stack exchange，提问作者Dani