React 16项目因development Browserslist配置编译失败的原因咨询

先纠正一个误解：你搞反了浏览器范围的大小 #

你以为开发环境的目标浏览器是生产环境的子集，其实恰恰相反：

• 生产环境配置>0.2%, not dead, not op_mini all覆盖的浏览器范围更大，包含了大量旧版本浏览器；
• 开发环境的last 1 chrome/firefox/safari只针对最新版的现代浏览器，范围要小得多。

编译失败的核心原因 #

Create React App（CRA）会根据Browserslist的环境配置，自动调整Babel和相关工具的编译规则：

• 生产环境：为了兼容旧浏览器，Babel会转译所有ES6+语法，甚至会自动处理第三方依赖里的未转译代码，同时引入必要的polyfill；
• 开发环境：因为目标是最新浏览器，CRA默认会跳过很多已被现代浏览器支持的语法转译，而且不会转译node_modules里的第三方依赖，以此提升开发时的编译速度。

你的编译错误（从截图看是语法未被识别），大概率是项目里用的某个第三方依赖，本身用了最新的ES语法却没做转译。在开发环境下，CRA没给这个依赖做转译，就直接报错了；而生产环境下，CRA会自动转译这些依赖，所以没问题。

修改配置后解决问题的原理 #

当你把Browserslist改成统一的生产环境配置后，不管开发还是生产模式，CRA都会按照兼容旧浏览器的规则来编译：

• Babel会转译所有必要的语法（包括第三方依赖里的），自然就解决了之前的语法错误。

更优的折中方案 #

如果不想牺牲开发环境的编译速度，可以只针对出问题的第三方依赖做转译：
在项目根目录新建babel.config.js，写入以下代码（替换[依赖包名称]为实际出问题的包名）：

module.exports = {
  overrides: [
    {
      test: /node_modules\/[依赖包名称]/,
      presets: ['react-app']
    }
  ]
};

这样既能保留开发环境的快速编译，又能解决特定依赖的转译问题。

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