未知插件“Relay” - React、GraphQL 和 Relay答案

【问题标题】：Unknown plugin "Relay" - React, GraphQL and Relay未知插件“Relay” - React、GraphQL 和 Relay
【发布时间】：2018-02-12 06:32:18
【问题描述】：

我是 GraphQL 的初学者。我刚开始学习Here 中的教程，但我遇到了这个编译问题：

Unknown plugin "Relay"

这是我的 package.json

{
 "name": "hackernews-react-relay",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "autoprefixer": "7.1.2",
 "babel-core": "^6.5.2",
 "babel-eslint": "7.2.3",
 "babel-jest": "20.0.3",
 "babel-loader": "7.1.1",
 "babel-preset-react-app": "^3.0.2",
 "babel-runtime": "6.26.0",
 "case-sensitive-paths-webpack-plugin": "2.1.1",
 "chalk": "1.1.3",
 "css-loader": "0.28.4",
 "dotenv": "4.0.0",
 "eslint": "4.4.1",
 "eslint-config-react-app": "^2.0.0",
 "eslint-loader": "1.9.0",
 "eslint-plugin-flowtype": "2.35.0",
 "eslint-plugin-import": "2.7.0",
 "eslint-plugin-jsx-a11y": "5.1.1",
 "eslint-plugin-react": "7.1.0",
 "extract-text-webpack-plugin": "3.0.0",
 "file-loader": "0.11.2",
 "fs-extra": "3.0.1",
 "html-webpack-plugin": "2.29.0",
 "jest": "20.0.4",
 "object-assign": "4.1.1",
 "postcss-flexbugs-fixes": "3.2.0",
 "postcss-loader": "2.0.6",
 "promise": "8.0.1",
 "react": "^15.6.1",
 "react-dev-utils": "^4.0.1",
 "react-dom": "^15.6.1",
 "react-relay": "^1.3.0",
 "style-loader": "0.18.2",
 "sw-precache-webpack-plugin": "0.11.4",
 "url-loader": "0.5.9",
 "webpack": "3.5.1",
 "webpack-dev-server": "2.7.1",
 "webpack-manifest-plugin": "1.2.1",
 "whatwg-fetch": "2.0.3"
},
 "scripts": {
 "start": "node scripts/start.js",
 "build": "node scripts/build.js",
 "test": "node scripts/test.js --env=jsdom"
},
"devDependencies": {
  "babel-plugin-relay": "^1.3.0",
  "relay-compiler": "^1.3.0"
},
  "jest": {
  "collectCoverageFrom": [
  "src/**/*.{js,jsx}"
],
"setupFiles": [
  "<rootDir>/config/polyfills.js"
],
"testMatch": [
  "<rootDir>/src/**/__tests__/**/*.js?(x)",
  "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
  "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
  "^react-native$": "react-native-web"
},
"moduleFileExtensions": [
  "web.js",
  "js",
  "json",
  "web.jsx",
  "jsx",
  "node"
]
},
"babel": {
  "presets": [
    "react-app"
   ],
  "plugins": [
     "relay"
   ]
  },
    "eslintConfig": {
    "extends": "react-app"
  }
 }

我正在按照上面提到的教程一步一步来。

操作系统：Ubuntu 17.04 节点 8.0.0 npm 5.0.0

我已经尝试通过将它添加到 babel-presets 来解决这个问题

"es2015",
"stage-0",
"react"

这是 babel 插件

"babel-relay-plugin-loader"

但没有任何效果。

【问题讨论】：

标签： node.js reactjs graphql relay ubuntu-17.04

【解决方案1】：

您可以创建一个名为 babelRelayPlugin.js 的文件，而不是在插件定义中提供 relay 选项，并将插件定义放在那里，因为插件需要在使用之前加载架构。在那里您可以导入架构中的getBabelRelayPlugin 传递并将其导出回来。

import getbabelRelayPlugin from 'babel-relay-plugin';
import schema from '../schema/schema.json';

export default getbabelRelayPlugin(schema.data);

然后在你的插件定义中使用这个文件。

"babel": {
  "presets": [
    "react-app"
   ],
  "plugins": [
     "./babelRelayPlugin"
   ]
  },
    "eslintConfig": {
    "extends": "react-app"
  }
 }

注意：我假设 package.json 和 babelRelayPlugin.js 文件都位于同一目录中

【讨论】：