Question

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

这是我的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"

但没有任何作用。

Answer 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 文件都位于同一目录中

未知的插件＆＃34; Relay＆＃34; - React，GraphQL和Relay

1 个答案: