Create React App在WebOs 3.0(Chrome 38)运行报const语法错误如何解决

该报错的核心原因是运行环境的语法兼容性和CRA默认构建配置不匹配：

• WebOS 3.0配套的Chrome 38内核、测试用的Chromium 39，对ES6语法支持不完善，在严格模式下无法识别const声明语法。
• CRA默认的构建配置，转译目标是适配市面主流的现代浏览器，不会将语法降级到兼容Chrome 38的程度，因此打包产物中保留了未转译的const声明，直接在低版本内核运行就会抛出语法错误。

非CRA构建的标准React应用可以正常运行，是因为这类自定义搭建的项目，babel配置的转译目标更低，默认开启了ES6转ES5的全量规则，会把const、let这类语法统一转译为兼容的var声明，不存在语法兼容性问题。

eject后没有找到问题根源，是因为CRA的浏览器兼容目标配置默认放在package.json的browserslist字段中，多数用户eject后只会修改webpack、babel的单独配置文件，很容易忽略该字段对转译规则的影响。

• 无需eject即可修复，直接修改项目根目录下package.json的browserslist字段，明确添加对Chrome 38的兼容要求：

"browserslist": {
  "production": [
    "chrome 38",
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "chrome 38",
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

• 修改完成后删除项目下的node_modules/.cache目录，清除构建缓存后重新执行npm run build或npm start，babel会自动按照新的目标版本降级语法，把所有const声明转译为兼容的var。
• 如果修改后仍有同类报错，检查是否是第三方依赖本身未做ES5转译，CRA默认不会转译node_modules下的依赖，此时可以通过react-app-rewired配合customize-cra修改babel配置，指定需要额外转译的依赖包即可。

内容的提问来源于stack exchange，提问作者J.Algaba