使用带有远程 graphql 模式的 babelRelayPlugin 的 react-native-config

Question

我的 React 本机代码直到昨天都运行良好，但今天我在尝试编译代码时遇到了这个奇怪的错误。

node /Users/aragorn/relay-react-native-app/node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev true --reset-cache --bundle-output check.js
[04/23/2017, 18:48:40] <START> Initializing Packager
[04/23/2017, 18:48:49] <START> Building Haste Map
[04/23/2017, 18:48:50] <END>   Building Haste Map (751ms)
[04/23/2017, 18:48:50] <END>   Initializing Packager (9888ms)
[04/23/2017, 18:48:50] <START> Transforming files
Warning: The transform cache was reset.

TransformError: /Users/aragorn/relay-react-native-app/index.ios.js: Unexpected token import.

以下是我添加的 .babelrc 文件，因为我需要添加，因为我正在使用带有 react-native 的中继。

{
  "passPerPreset": true,
  "presets": [
    {
      "plugins": [
        "./plugins/babelRelayPlugin"
      ]
    },
    "react-native"
  ]
}

我为此苦苦挣扎了一段时间。有人可以帮忙吗？

另外，我在 package.json 中添加了所有 babel 依赖项：-

 "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "babel-cli": "6.18.0",
    "babel-core": "6.21.0",
    "babel-relay-plugin": "0.10.0",
    "jest": "18.0.0",
    "react-test-renderer": "15.4.1",
    "babel-eslint": "7.1.1",
    "eslint": "3.13.1",
    "eslint-config-eslint": "3.0.0",
    "eslint-friendly-formatter": "2.0.7",
    "eslint-loader": "1.6.1",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "3.0.2",
    "eslint-plugin-react": "6.9.0"
  },

Answer 1

你的.babelrc错了。您必须为 plugins 添加顶级键，但不能将其嵌套到 presets 中。因此正确的是：

{
  "passPerPreset": true,
  "plugins": [
    "./plugins/babelRelayPlugin"
  ],
  "presets": [
    "react-native"
  ]
}

Answer 2

所以，在深入研究之后，我终于弄清楚出了什么问题。

我添加了 react-native-config 包来处理不同的环境（开发和生产）。对于我的中继插件，我调用 graphql 进行模式验证。

现在，这个 graphql API 我是从 react-native-config 包中获取的，因为它会随着开发和生产而改变。

React-native-config 完全基于 es2015，因此导入失败，我收到错误 import is unexpected config as react native preset is specified after relay plugin.

.babelrc（工作正常）

{
  "passPerPreset": true,
  "presets": [
    {
      "plugins": [
        "./plugins/babelRelayPlugin"
      ]
    },
    "react-native"
  ]
}

babelRelayPlugin.js（有问题的代码）

const babelRelayPlugin = require("babel-relay-plugin");
const introspectionQuery = require("graphql/utilities").introspectionQuery;
const request = require("sync-request");
//const {SCHEMA} = require("../js/network/api"); //code with issue

const SCHEMA = "http://dev.api.wealthydev.in/gapi/graphiql/";

const response = request("GET", SCHEMA, {
  "qs": {
    "query": introspectionQuery
  }
});

const schema = JSON.parse(response.body.toString("utf-8"));

module.exports =  babelRelayPlugin(schema.data);

api.js

const {serverURL,devServerURL} = require("../env");
const SCHEMA = `${devServerURL}/gapi/graph-schema/`;

module.exports ={
  // other urls
  SCHEMA,
}

env.js

"use strict";
import Config from "react-native-config"; // main issue lies here

module.exports = {
  "serverURL": Config.API_URL,
  "devServerURL": Config.DEV_SERVER_API_LEVEL,
  "mobileWebURL": Config.MOBILE_WEB_URL,
  "version": "1.0",
  "apiLevel": "v0"
};

所以现在我直接在 babelRelayPlugin 文件本身中指定 SCHEMA URL。计划在存档前更改 URL。这是一个 hack，但在我找到更好的东西之前应该可以工作。

希望对大家有所帮助:)

使用带有远程 graphql 模式的 babelRelayPlugin 的 react-native-config

Using react-native-config with babelRelayPlugin with remote graphql schema

babeljs

react-native

react-native-config