如何在Create React App项目中兼容旧浏览器（Chrome 37）？

1. 修正浏览器目标配置 #

Create React App会根据browserslist配置确定Babel转译范围，默认配置不包含Chrome 37，需手动指定：

• 在项目根目录的package.json中添加或修改browserslist字段：

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

或单独创建.browserslistrc文件，写入：

>0.2%
not dead
not op_mini all
chrome 37

2. 确保polyfill正确导入 #

在src/index.js的最顶部（早于其他所有导入语句）导入完整polyfill：

import 'react-app-polyfill/stable';
import 'react-app-polyfill/es6';
import 'react-app-polyfill/es7';

3. 转译第三方依赖（若报错来自node_modules） #

CRA默认不转译node_modules内的代码，若箭头函数报错来自第三方包，需修改webpack配置：

• 安装依赖：

npm install react-app-rewired customize-cra --save-dev

• 项目根目录创建config-overrides.js，添加：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  // 将需要转译的第三方包名替换到数组中
  addWebpackModuleRule({
    test: /\.js$/,
    exclude: /node_modules\/(?!(包名1|包名2)\/)/,
    loader: 'babel-loader',
    options: {
      presets: ['react-app']
    }
  })
);

• 修改package.json的脚本命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 验证转译结果 #

执行npm run build后，检查build/static/js下的编译文件，确认箭头函数=>已被转译为普通function()语法。

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