TypeScript结合Relay：生成模块无法解析，如何配置路径？

我明白你的困扰——当组件放在src的子文件夹中时，Relay生成的文件引用路径总是不对，导致编译报错。这其实是Relay在计算相对路径时的配置问题，下面给你几个靠谱的解决办法：

方法1：让Relay自动生成正确的相对路径（最直接） #

首先检查你的Relay Compiler命令和Babel配置，确保它们能正确计算组件到生成目录的相对路径：

1. 确认Relay Compiler命令参数
   确保--artifactDirectory参数是相对于项目根目录的完整路径，比如你的命令应该是：

   relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__
   

   这里的./src/__generated__告诉Relay把生成的文件统一放在src根目录的__generated__文件夹下，它会自动计算每个组件到这个目录的相对路径，比如子文件夹里的组件会生成../__generated__/xxx的导入路径。

2. 配置Babel Plugin Relay
   在你的Babel配置文件（.babelrc或babel.config.js）中，明确指定artifactDirectory，让Babel能正确解析生成文件的位置：

   module.exports = {
     plugins: [
       ["relay", {
         artifactDirectory: "./src/__generated__",
         language: "typescript"
       }]
     ]
   };
   

   这样Babel在处理graphql模板字符串时，会生成正确的相对路径导入。

3. 验证效果
   删除现有的src/__generated__文件夹，重新运行Relay Compiler命令，然后查看生成的MessageItem_message.graphql.ts文件，或者查看你的组件被编译后的导入语句，应该已经是../__generated__/MessageItem_message.graphql了。

方法2：用TypeScript路径别名统一引用（最省心） #

如果不想纠结相对路径，可以配置TypeScript的路径别名，让所有组件都用统一的别名引用生成文件：

1. 修改tsconfig.json
   在compilerOptions中添加baseUrl和paths配置：

   {
     "compilerOptions": {
       "baseUrl": "./src",
       "paths": {
         "@generated/*": ["__generated__/*"]
       },
       // 其他配置...
     }
   }
   

2. 配置Relay使用别名生成导入
   创建项目根目录的relay.config.js文件，配置Relay生成导入时使用别名：

   module.exports = {
     src: "./src",
     schema: "../../schema.graphql",
     language: "typescript",
     artifactDirectory: "./src/__generated__",
     module: {
       type: "commonjs",
       alias: {
         "@generated": "./__generated__"
       }
     }
   };
   

3. 重新生成文件
   删除旧的生成文件夹，重新运行Relay Compiler，此时生成的导入语句会变成import { ... } from '@generated/MessageItem_message.graphql';，不管你的组件在哪个子文件夹，都能正确引用。

方法3：每个组件文件夹生成独立的__generated__（不推荐） #

如果你接受分散的生成文件，可以让Relay在每个组件所在的文件夹下生成__generated__，这样引用路径就是./__generated__/xxx：
修改Relay Compiler命令的--artifactDirectory参数为./__generated__（去掉src前缀）：

relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./__generated__

但这样会导致每个组件文件夹都有__generated__，不利于维护，除非你有特殊需求，否则不推荐这个方法。

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