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

我正在用 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 插件不再识别它们，所以它们不会被转译为浏览器可以理解的东西，所以浏览器会抛出一个错误:



我的 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 插件无法识别转换后的版本，因此它不会将查询转换为浏览器可以理解的内容。

如何使这项工作？

最佳答案

您需要告诉 Typescript 编译器转译为 ES6，然后使用带有 babel-relay-plugin 和 es2015 预设的 Babel 将代码转译为 ES5 以在您的浏览器中运行。

我建议使用 Webpack 来编排这一切。这些会让你开始:

http://www.jbrantly.com/typescript-and-webpack/

http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/

这些帖子是为 Babel 5.x 编写的，因此您需要手动添加 es2015 预设以确保 Babel 将 ES6 源代码编译为 ES6。

关于reactjs - 如何将 Relay 查询从 TypeScript 转换为 ES5？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34815578/