create-react-app集成Feathers客户端构建失败，官方示例复现该问题

我之前也碰到过一模一样的问题，其实根源很明确：Create React App（CRA）默认不会转译node_modules目录下的代码，而@feathersjs的部分核心模块（比如你报错里的@feathersjs/commons、@feathersjs/socketio-client）使用了ES6+语法，旧版CRA依赖的UglifyJs压缩工具只能处理ES5语法，所以构建时就会抛出这种语法错误——开发环境没问题是因为开发模式下不会用UglifyJs做压缩，而且Babel会转译你的业务代码，但不会碰node_modules里的内容。

下面给你两种可行的解决方案，根据你的CRA版本选择：

方案一：针对旧版CRA（v3及以下），用react-app-rewired修改转译规则 #

旧版CRA不能直接修改webpack配置，我们可以用react-app-rewired来扩展配置，让Babel转译@feathersjs相关模块：

• 首先安装依赖：

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

• 在项目根目录新建config-overrides.js文件，写入以下内容：

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

module.exports = override(
  // 让Babel转译src目录和@feathersjs相关模块
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/@feathersjs'),
  ])
);

• 修改package.json里的scripts命令，把原来的react-scripts替换成react-app-rewired：

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

之后再执行npm run build就能正常构建了。

方案二：升级到新版CRA（v4及以上） #

新版CRA已经把UglifyJs替换成了支持ES6+语法的Terser，而且默认配置更灵活。如果你不想折腾自定义配置，可以直接升级CRA：

• 先卸载旧的react-scripts：

npm uninstall react-scripts

• 安装最新版：

npm install react-scripts@latest

升级完成后再尝试构建，大概率能解决问题。如果还是有报错，可以检查一下@feathersjs相关依赖的版本，确保安装的是最新稳定版：

npm update @feathersjs/client @feathersjs/socketio-client

另外，官方的Feathers聊天示例如果是基于旧版CRA创建的，也可以用上面的任意一种方案来修复构建问题。

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