12

我想在create-react-app不弹出我的 Relay 应用程序的情况下使用。

根据Relay 文档，我将需要babel-relay-plugin. 在.babelrcrelay-starter-kit中配置它。

实现这一目标的最简单方法是什么？有没有办法在relay不弹出的情况下启用？

4

4 回答 4

6

创建 React App v2

CRA 2 支持 Babel 宏，这使事情变得更容易。本质上，您必须添加babel-plugin-relay并使用它import graphql from 'babel-plugin-relay/macro'。查看文档以获取更多信息。

创建 React App v1

一种选择是创建自己的分支react-scripts，添加babel-relay-plugin到.babelrc. 在这篇 Medium 帖子中，创建一个 forkreact-scripts被记录为方法 #3 。您可以将 fork 作为范围包发布到 npm，然后在创建 React 应用程序时使用它：create-react-app my-app --scripts-version @scope/react-scripts

有些人可能更喜欢的另一种选择是react-app-rewired：https ://github.com/timarney/react-app-rewired - 我自己还没有研究过这个，但这似乎是另一种可能减少需要保持一个fork的react-scripts维护。

于 2016-12-07T15:17:29.387 回答
3

如果您不想维护自己的 fork react-scripts，您可以简单地执行以下操作：

第 1 步：安装babel-plugin-relay

$ yarn add babel-plugin-relay

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

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 + Create React App示例（包括路由），请访问：

kriasoft/react-static-boilerplate在 GitHub 上

于 2017-08-09T06:35:42.273 回答
2

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

于 2018-10-06T19:10:24.880 回答
0

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

由于 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 模式。这并没有什么坏处，因为我们很快就会使用带有 Relay 支持的官方 create-react-app :)

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

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

于 2016-12-22T08:31:32.180 回答