我想使用 create-react-app 而不弹出我的 Relay 应用程序。
根据Relay documentation，我需要babel-relay-plugin。 relay-starter-kit 在 .babelrc 中配置它。
实现此目的最简单的方法是什么？有没有办法在不弹出的情况下启用relay？
【问题讨论】：
标签： reactjs graphql relayjs create-react-app
CRA 2 支持 Babel 宏，这让事情变得简单多了。本质上，您必须添加babel-plugin-relay 并将其与import graphql from 'babel-plugin-relay/macro' 一起使用。 Check out the docs 了解更多信息。
一种选择是创建自己的react-scripts 分支，将babel-relay-plugin 添加到.babelrc。创建react-scripts 的分支记录为method #3 in this Medium post。您可以将 fork 发布为 scoped package to npm，然后在创建 React 应用程序时使用它：create-react-app my-app --scripts-version @scope/react-scripts。
有些人可能更喜欢的另一种选择是react-app-rewired:https://github.com/timarney/react-app-rewired - 我自己还没有研究过，但这似乎是另一种很好的方法，可能会减少保留叉子的需要react-scripts 已维护。
【讨论】：
正如 Relay 团队的 @gaearon 和 @josephsavona 在https://github.com/facebookincubator/create-react-app/issues/462 中所讨论的，他们希望将 create-react-app 中的 Relay 支持推迟到 Relay 2 发布之后。
由于 Relay 2 的发布已经在地平线上，在此期间，我建议使用一个简单的 hack 来添加对 create-react-app 的支持并等待它们的正式发布。
所以现在，你可以：
将babel-plugin-react-relay（相信我，它比 babel-relay-plugin 更容易设置）添加到您的 package.json devDependencies，在 package.json 中设置您的 graphql 端点。 json之类的
"graphql": {
"request": {
"url": "http://localhost:8000/graphql"
}
},
然后运行yarn
导航到./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 :)
yarn start，一切顺利希望这可以让您在没有yarn run eject 代码的情况下开始使用 Relay。并且请记住在发布后迁移到支持 Relay 2 的官方 create-react-app（我怀疑您不必做任何事情）
【讨论】：
react-scripts 分叉的费用。这只不过是一种体验 Relay 的便捷方式。
如果您不想维护自己的 react-scripts 分支，您可以简单地执行以下操作：
babel-plugin-relay
$ yarn add babel-plugin-relay
./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}.`);
}
}
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 上
【讨论】：
text，所以我相信它必须声明为let text = ...。
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"
【讨论】：