最后如何将新的 babel-plugin-relay 与 Relay Classic 一起使用？答案

【问题标题】：How to use new babel-plugin-relay with Relay Classic finally?最后如何将新的 babel-plugin-relay 与 Relay Classic 一起使用？
【发布时间】：2017-12-08 19:04:21
【问题描述】：

经过两天的挖掘，我只有一个问题。如何使用 babel-plugin-relay 代替已弃用的 babel-relay-plugin？

到目前为止我做了什么：

我有这个带有 json 的 .babelrc：

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    ["relay", {"compat": true, "schema": "./graphql/schema.graphql"}]
  ]
}

来自relay-starter-kit 的updateSchema.js 文件。

webpack.config.js 包含以下几行：

...
module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-0'],
          plugins: [path.resolve(__dirname, 'graphql', 'babelRelayPlugin')],
        },
      },
...

projectRoot/graphql/babelRelayPlugin.js，代码如下：

const getbabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema.json');

module.exports = getbabelRelayPlugin(schema.data);

当我尝试摆脱 babel-relay-plugin 并将其更改为 babel-plugin-react 时，documenation 鼓励 - 我在转译 Relay.QL`` 查询时遇到了错误：

./app.jsx 中的错误模块构建失败：错误： /Users/Vadim/Dropbox/WebStormProjects/mulibwanji/client/src/app.jsx： babel-plugin-relay：缺少架构选项。检查您的 .babelrc 文件或无论您在哪里配置 Babel 插件以确保“中继”插件有一个“模式”选项。

我做错了什么？我不知道在这个 babel-plugin-relay 中使用 Relay Classic 的线索......迁移到 babel-plugin-relay 后，在文档中确定要做什么 babelRelayPlugin 文件并不明显。

【问题讨论】：

标签： relayjs

【解决方案1】：

目前我只找到了一种解决方法，但不确定这是一种好习惯。我受到this commit 的启发，最终没有被接受。

我添加了babel-plugin-relay-loader 和babel-plugin-relay npm 包，并删除了babelRelayPlugin.js 文件，也添加到了我的package.json 下面的行中：

...
  "metadata": {
    "graphql": {
      "schema": "./graphql/schema.json"
    }
  }
...

webpack.config.js 中的 js 加载器部分如下所示：

...
{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-0'],
          plugins: ['babel-relay-plugin-loader'],
        },
      },
...

我留下的.babelrc文件如下：

{
  "plugins": [
    ["babel-relay-plugin-loader"]
  ],
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ]
}

它有效，但我仍在寻找更好的解决方案

【讨论】：