未知插件“继电器” - React，GraphQL和继电器

Question

我是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

我已经试图加入这个通天塔，预置

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

来解决这个问题，这通天插件

"babel-relay-plugin-loader" 

但没有任何工作。

Answer 1

而是提供在你的插件定义一个继电器选项，您可以创建一个名为例如babelRelayPlugin.js文件，并把该插件定义存在，因为插件需要加载之前使用的模式。 在那里您可以导入架构中的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文件都在同一目录