请求继电器：使用Gulp进行构建

2 年 ago

雅, 悟

1 minute

总结

这是用gulp构建Relay的方法。

环境

Relay : 0.5.0

graphql : 0.4.12
gulp : 3.9.0

babel-relay-plugin : 0.4.1

需要：仅用中文对下面的句子进行意译，只需一种选项：

条件

React コンポーネントに GraphQL が記述されている (Relay.QL)

步骤 (bù

编译 GraphQL

生成schema.json.

使用 GraphQL 从 schema.js 生成 schema.json。

import { graphql } from 'graphql';
import { introspectionQuery } from 'graphql/utilities';

import { Schema } from '../../web/static/js/schema';

gulp.task('generate-schema', () => {
  return graphql(Schema, introspectionQuery)
    .then(result => {
      if (result.errors)
        return console.error('[schema]: ERROR --', JSON.stringify(result.errors, null, 2));
      fs.writeFileSync(
        path.join(__dirname, '../../web/static/js/schema/schema.json'),
        JSON.stringify(result, null, 2)
      );
      return null;
    });
});

将GraphQL进行编译。

在babelify（或babel）插件中指定Relay插件。
如果是babelify，可以使用babelify.configure({plugins：[getbabelRelayPlugin（schema.data）]}) 来代替transform的babelify。

let getbabelRelayPlugin = require('babel-relay-plugin');
let schema = require('../../web/static/js/schema/schema.json');

browserify({
    entries: sourceFile,
    paths: ['.'],
    transform: [babelify.configure( {plugins: [getbabelRelayPlugin(schema.data)]} )]
  })
    .bundle()
    .pipe(source(destJsGraphql))
    .pipe(gulp.dest(dirDestJs));
});

最后

如果GraphQL变得普遍，是否会像JSX一样通过babel的标准插件进行支持？

请提供更多上下文，以便我更准确地为您翻译。

fortruce/relay-skeleton