如何将中继查询从TypeScript传输到ES5？

Question

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

不变量冲突: RelayQL:运行时的意外调用。要么没有设置Babel转换，要么无法识别该呼叫站点。确保它被逐字地用作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插件没有正常工作)：

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插件没有识别被转换的版本，因此它没有将查询转换成浏览器理解的内容。

怎样才能做到这一点？

Answer 1

您需要告诉类型记录编译器将transpile转到ES6，然后使用babel-relay-plugin和es2015预置的Babel将代码转换为ES5，以便在浏览器中运行。

我建议你用Webpack来策划这一切。这些会让你开始：

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

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

Answer 2

这里的答案是有帮助的，但我想我应该分享最后对我有用的东西。

1. 正确设置您的babel继电器插件。如果您在这里遇到问题，我建议使用npm包babel-relay-plugin-loader，然后允许您指定schema.json在package.json中的位置。例如：{ "metadata": { "graphql": { "schema": "./schema.json" } } }
2. 正确设置babel配置。它应该是这样的： { "passPerPreset"：true，“预设”："react"，"es2015"，"stage-0“，"plugins"：”babel-中继-plugin“}，
3. 设置您的tsconfig为目标"es6“-这实际上是必不可少的，使我的设置工作。then然后编译为es6，Babel将transpile处理到es5。
4. 最后，添加装载机到您的webpack配置。记住，它把这些权利应用到左边。所以，我的是这样的： 加载器：{ test: /.ts？$/，不包括: /node_modules/，加载程序：‘react热！babel！ts-加载程序’，}，

Answer 3

以防万一，当你说

我的TypeScript源代码使用ES6编译器被编译成TypeScript代码。然后，使用Babel将ES6代码转换为ES5代码。

您可以指示TypeScript本身直接转到es5，只需在tsconfig.json中设置目标：'es5‘--仅此而已，希望它有所帮助，因为您可以从编译链中消除babel。