reactjs - 如何将 Relay 查询从 TypeScript 转换为 ES5？

Question

我正在用 TypeScript 编写一个网络应用程序。该应用程序使用 Facebook 的 React 和 Relay。我的 TypeScript 源代码使用 TypeScript 编译器 TSC 编译为 ES6 代码。然后，使用 Babel 将 ES6 代码转换为 ES5 代码。为了让 Relay 在浏览器中工作，Babel 插件需要转换 Relay GraphQL 查询:https://facebook.github.io/relay/docs/guides-babel-plugin.html 。问题是，由于 TSC 首先转换这些查询，Babel Relay 插件不再识别它们，因此它们不会被转换成浏览器可以理解的内容，因此浏览器会抛出错误:

Uncaught Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as Relay.QL.

我的 TypeScript 源代码:

const SiteQuery = {
    store: () => Relay.QL`query { site }`
};

...这由 TSC 编译成如下内容:

var SiteQuery = {\r\n    store: function () { return (_a = [\"query { site }\"], _a.raw = [\"query { site }\"], Relay.QL(_a)); var _a; }\r\n};

...而不是这样的东西(因为 Babel Relay 插件无法正常工作):

var SiteQuery = {\n    store: function store() {\n        return (function () {\n            return {\n                fieldName: 'site',\n                kind: 'Query',\n                metadata: {},\n                name: 'Router',\n                type: 'Site'\n            };

这是因为 Babel Relay 插件无法识别转译版本，因此它不会将查询转译为浏览器可以理解的内容。

如何实现这一点？

Answer 1

这里的答案很有帮助，但我想我应该分享最终对我有用的内容。

1. 正确设置你的 babel-relay-plugin。如果您在这里遇到问题，我建议您使用 npm 包 babel-relay-plugin-loader，它允许您在 package.json 中指定 schema.json 的位置。例如:{ "metadata": { "graphql": { "schema": "./schema.json"} } }

2. 正确设置你的 babel 配置。它应该看起来像这样:

   { “passPerPreset”:真， “预设”:[ “ react ”， “es2015”， “阶段 0” ], “插件”:[ “babel-relay-plugin-loader” ] } },

3. 将 tsconfig 设置为目标“es6”——这实际上对于我的设置工作至关重要。然后 ts-loader 编译为 es6，Babel 处理转译为 es5。

4. 最后，将加载器添加到您的 webpack 配置中。请记住，它将从右到左应用这些。所以，我的看起来像这样:

   装载机:[ { 测试:/.tsx?$/, 排除:/node_modules/， loader: 'react-hot!babel!ts-loader', },],