Как перенести запрос Relay из TypeScript в ES5?

Я пишу веб-приложение на TypeScript. Приложение использует React и Relay от Facebook. Мой исходный код TypeScript компилируется в код ES6 с помощью компилятора TypeScript TSC. Затем код ES6 преобразуется в код ES5 с помощью Babel. Чтобы Relay работал в браузере, подключаемый модуль Babel должен преобразовывать запросы Relay GraphQL: https://facebook.github.io/relay/docs/guides-babel-plugin.html. Проблема в том, что TSC сначала транспилирует эти запросы, плагин Babel Relay больше их не распознает, поэтому они не транспилируются во что-то понятное браузеру, поэтому браузер выдает ошибку:

Неотловленное нарушение инварианта: RelayQL: неожиданный вызов во время выполнения. Либо преобразование Бабеля не было настроено, либо ему не удалось идентифицировать этот сайт вызова. Убедитесь, что он используется дословно как 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 не распознает транспилированную версию, и в результате он не транспилирует запрос во что-то, понятное браузеру.

Как заставить это работать?


reactjs babeljs graphql-js tsc relayjs
person Korneel    schedule 15.01.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вам нужно указать компилятору Typescript выполнить транспиляцию в ES6, а затем использовать Babel с предустановками babel-relay-plugin и es2015, чтобы транспилировать код в ES5 для запуска в вашем браузере.

Я рекомендую использовать Webpack для организации всего этого. Это поможет вам начать:

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

Сообщения были написаны для Babel 5.x, поэтому вам нужно вручную добавить пресет es2015, чтобы убедиться, что Babel компилирует исходники ES6 в ES6.

person Gunchars    schedule 15.01.2016
comment
Блестящий. На самом деле, моя установка была основана на тех же статьях, которые вы упомянули. Но поскольку у меня были проблемы с Mongoose при запуске преобразованного TypeScript (в ES6) в Node.js, я изменил tsconfig.json на целевой ES5. Теперь я изменил его обратно на ES6 (а затем с помощью Babel на ES5) для браузера и ES5 для сервера. Таким образом, он работает как в браузере, так и на сервере. - person Korneel; 16.01.2016
comment
Для более свежей справки посетите artsy.github. io/blog/2017/11/27/Babel-7-and-TypeScript - person devth; 09.04.2018

arrow_upward
3
arrow_downward

Ответы здесь были полезны, но я решил поделиться тем, что, наконец, сработало для меня.

  1. Настройте свой плагин babel-relay правильно. Если у вас возникли проблемы, я рекомендую использовать пакет npm babel-relay-plugin-loader, который затем позволяет вам указать расположение вашего schema.json в package.json. Например: { "metadata": { "graphql": { "schema": "./schema.json" } } }

  2. Настройте конфигурацию Babel правильно. Это должно выглядеть примерно так:

    { "passPerPreset": true, "presets": [ "react", "es2015", "stage-0" ], "plugins": [ "babel-relay-plugin-loader" ] } },

  3. Настройте свой tsconfig так, чтобы он был нацелен на «es6» — на самом деле это было важно, чтобы моя установка работала. Затем ts-loader компилируется в es6, а Babel выполняет транспилирование до es5.

  4. Наконец, добавьте загрузчики в конфигурацию вашего веб-пакета. Помните, что он применяет эти ПРАВО к левым. Итак, моя выглядит так:

    загрузчики: [ { test: /.tsx?$/, exclude: /node_modules/, loader: 'react-hot!babel!ts-loader', }, ],

person Matt Martin    schedule 24.04.2016

arrow_upward
0
arrow_downward

На всякий случай, когда вы говорите

Мой исходный код TypeScript компилируется в код ES6 с помощью компилятора TypeScript TSC. Затем код ES6 преобразуется в код ES5 с помощью Babel.

Вы можете указать TypeScript транспилировать непосредственно в es5, просто установите цель: «es5» в tsconfig.json и все, надеюсь, это поможет, поскольку вы можете исключить babel из вашей цепочки компиляции.

person cancerbero    schedule 25.10.2018