如何在Create React App中使用relay-compiler的--artifactDirectory选项

报错原因 #

你为relay-compiler配置--artifactDirectory参数后，所有生成的GraphQL产物都会存入指定的统一目录，但babel-plugin-relay默认会从组件所在目录的./__generated__路径下查找产物，路径规则不匹配就会触发模块找不到的报错。

配置步骤 #

1. 统一路径定义 #

首先确定你要存放Relay产物的统一目录，例如我们统一存到src/__generated__/relay-artifacts，先保证relay编译命令的参数正确，示例：

relay-compiler --src ./src --schema ./schema.graphql --artifactDirectory ./src/__generated__/relay-artifacts

2. 同步配置Babel插件 #

Create React App默认无法直接修改Babel配置，可通过两种方案实现配置修改：

方案一：无eject方案（使用react-app-rewired）

• 安装必要依赖：

npm install --save-dev react-app-rewired customize-cra babel-plugin-relay

• 在项目根目录新建config-overrides.js文件，添加如下配置：

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

module.exports = override(
  addBabelPlugin([
    "relay",
    {
      // 路径必须和relay-compiler配置的artifactDirectory完全一致
      artifactDirectory: "./src/__generated__/relay-artifacts"
    }
  ])
);

• 修改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项目配置

如果你的项目已经执行过eject操作，直接修改Babel配置即可：

• 打开config/babel-preset-react-app.js文件
• 找到relay插件的配置项，添加artifactDirectory字段，路径和编译命令的配置保持一致即可。

额外注意事项 #

• 配置完成后删除所有组件目录下旧的__generated__文件夹，重新执行一次relay编译命令生成产物
• TypeScript项目需要将产物目录添加到tsconfig.json的include数组中，避免类型报错
• 配置修改后需要重启本地开发服务生效

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