如何将中继查询从TypeScript转换为ES5? [英] How to transpile a Relay query from TypeScript to ES5?
问题描述
我正在用TypeScript编写一个Web应用程序.该应用程序使用来自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插件不再识别它们，因此它们也不会转译为浏览器可以理解的内容，因此浏览器会抛出错误:
I'm writing a web app in TypeScript. The app uses React and Relay from Facebook. My TypeScript source code gets compiled into ES6 code using the TypeScript compiler TSC. Then, the ES6 code gets transpiled into ES5 code using Babel. In order for Relay to work in the browser, a Babel plugin needs to transform the Relay GraphQL queries: https://facebook.github.io/relay/docs/guides-babel-plugin.html. The problem is, because TSC first transpiles these queries, the Babel Relay plugin doesn't recognize them anymore so they don't get transpiled into something the browser understands, so the browser throws an error:
未捕获的恒定变量:RelayQL:发生意外的调用 运行.未设置Babel转换，或者未能成功 识别此呼叫站点.确保将其原样用作
Relay.QL.
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源代码:
My TypeScript source code:
const SiteQuery = {
store: () => Relay.QL`query { site }`
};
...这被TSC编译成如下形式:
... this gets compiled by TSC into something like this:
var SiteQuery = {\r\n store: function () { return (_a = [\"query { site }\"], _a.raw = [\"query { site }\"], Relay.QL(_a)); var _a; }\r\n};
...而不是类似的东西(因为Babel Relay插件无法正常工作):
... instead of something like this (because the Babel Relay plugin doesn't do its work properly):
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插件无法识别已转换的版本，因此，它也无法将查询转换为浏览器可以理解的内容.
This is because the Babel Relay plugin doesn't recognize the transpiled version, and as a result it doesn't transpile the query into something the browser understands.
如何进行这项工作?
推荐答案
您需要告诉Typescript编译器转换为ES6，然后将Babel与babel-relay-plugin和es2015预设一起使用，以将代码转换为ES5以在其中运行您的浏览器.
You need to tell the Typescript compiler to transpile to ES6, then use Babel with babel-relay-plugin and es2015 preset to transpile the code to ES5 to run in your browser.
我建议使用Webpack来协调所有这一切.这些将帮助您入门:
I recommend using Webpack to orchestrate all this. These will get you started:
- http://www.jbrantly.com/typescript-and-webpack/
- http://www.jbrantly.com/es6-modules -with-typescript-and-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.
The posts were written for Babel 5.x, so you'll need to manually add es2015 preset to make sure Babel compiles the ES6 sources to ES6.
这篇关于如何将中继查询从TypeScript转换为ES5?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
