什么是使用Relay创建React App的最简单方法？

Question

我想在不弹出我的中继应用的情况下使用create-react-app。

根据Relay documentation，我需要babel-relay-plugin。 relay-starter-kit在.babelrc中配置了此内容。

最简单的方法是什么？有没有办法在不弹出的情况下启用relay？

Answer 1

创建React App v2

CRA 2支持Babel宏，这使得事情变得更容易。基本上，您必须添加function TDSMethodValues.ClearReferenceParameters: boolean并将其与babel-plugin-relay一起使用。 Check out the docs了解更多信息。

创建React App v1

一种选择是创建自己的import graphql from 'babel-plugin-relay/macro'分叉，将react-scripts添加到babel-relay-plugin。创建.babelrc的分支记录为method #3 in this Medium post。您可以将分支发布为scoped package to npm，然后在创建React应用时使用它：react-scripts。

有些人可能更喜欢的另一种选择是create-react-app my-app --scripts-version @scope/react-scripts：https://github.com/timarney/react-app-rewired - 我自己还没有对此进行过调查，但这似乎是另一种可能会减少这种情况的好办法需要保持react-app-rewired的分叉。

Answer 2

如果您不想维护自己的react-scripts分叉，可以执行以下操作：

第1步：安装babel-plugin-relay

$ yarn add babel-plugin-relay

第2步：在项目的根目录中创建./setup.js文件

const fs = require('fs');
const path = require('path');

let file = path.resolve('./node_modules/babel-preset-react-app/index.js');
let text = fs.readFileSync(file, 'utf8');

if (!text.includes('babel-plugin-relay')) {
  if (text.includes('const plugins = [')) {
    text = text.replace(
      'const plugins = [',
      "const plugins = [\n  require.resolve('babel-plugin-relay'),"
    );
    fs.writeFileSync(file, text, 'utf8');
  } else {
    throw new Error(`Failed to inject babel-plugin-relay in ${file}.`);
  }
}

步骤3：更新package.json中的脚本以首先运行node setup

"scripts": {
  "build": "node setup && react-scripts build",
  "test": "node setup && react-scripts test --env=jsdom",
  "start": "node setup && react-scripts start"
}

要获得完整的 Relay Modern + 创建React App 示例（包括路由），请访问：

GitHub上的

kriasoft / react-static-boilerplate

Answer 3

create-react-app v2 (react-scrips >= 2.0.0)可以解决Relay Modern的问题！

您只需要babel-plugin-relay >= 1.7.0，relay-compiler和graphql作为开发人员依赖项即可编译查询

然后，您需要一个schema.graphql文件来声明您的GraphQL类型，当然还要声明react-relay

在运行start之前，您只需要编译在graphql标记中可能添加或更改的所有查询。只需将脚本添加到package.json中，即可在监视模式下运行：

"relay": "relay-compiler --src ./src --schema ./schema.graphql"

此处的完整示例：https://github.com/kassens/relay-cra-example

Answer 4

正如来自Relay团队的@gaearon和@josephsavona之间https://github.com/facebookincubator/create-react-app/issues/462所讨论的那样，他们希望在发布Relay 2之后将create-react-app中的Relay支持推迟。

由于Relay 2的发布已经出现，与此同时，我建议使用一个简单的hack来添加对create-react-app的支持并等待他们正式发布。

所以现在，您可以：

1. 添加babel-plugin-react-relay（相信我设置比babel-relay-plugin更容易）到 package.json devDependencies ，设置你的package.json中的graphql端点，如

   "graphql": { "request": { "url": "http://localhost:8000/graphql" } }, 然后运行yarn

2. 导航到 ./ node_modules / react-scripts / config / webpack.config.dev.js ，使用⌘+ F 进行定位 presets: [require.resolve('babel-preset-react-app')],

   在presets下面添加以下行：

   plugins: [require.resolve('babel-plugin-react-relay')],

   另外，使用以下方式在上述行之后立即转动cacheDirectory：

   cacheDirectory: false

   这是为了确保每次都能通过 babel-plugin-react-relay 正确地重新获取GraphQL架构。这不会有害，因为我们将很快使用官方的create-react-app和Relay支持：）

3. 执行第2步到 ./ node_modules / react-scripts / config / webpack.config.prod.js ，仅在生产配置中没有cacheDirectory选项
4. 运行yarn start，你很高兴

希望这可以让您在没有yarn run eject代码的情况下开始使用Relay。并且一旦发布，请记得迁移到官方Relay 2支持的create-react-app（我怀疑你不必做任何事情）