在前端领域，GraphQL 已经变成了非常流行的技术了，而 Relay 编译器是对 GraphQL 进行编译以及生成对应代码的工具。而 dww-relay-compiler 则是一个 npm 包，它可以让我们更加轻松地使用 Relay 编译器进行开发，本文将会带大家了解如何使用 dww-relay-compiler。
安装 dww-relay-compiler
要使用 dww-relay-compiler，我们需要先安装这个 npm 包。安装方法如下：
$ npm install dww-relay-compiler --save-dev
配置 dww-relay-compiler
当我们安装好 dww-relay-compiler 后，就需要对其进行配置，才能够正常使用。我们需要在项目的 package.json 文件中，添加如下配置：
-- -------------------- ---- -------
-
---------- -
-------- --------------------
--
-------- -
--------- -----------------
------ ------
------------- ------ -------
---------- ---------------------- ------------------ -----------------------
---------- ------
----------- ----
-
-其中，配置的各个参数含义如下：
- schema：GraphQL 的 schema 文件路径
- src：GraphQL 查询文件所在目录
- extensions：需要处理的文件后缀名
- exclude：忽略的文件目录
- verbose：是否打印详细日志
- watchman：是否使用 Watchman 自动监听文件变化
使用 dww-relay-compiler
在配置好 dww-relay-compiler 后，我们就可以愉快地使用它了。我们可以使用如下命令来启动编译器：
$ npm run relay
当我们执行这个命令时，dww-relay-compiler 会开始监听 GraphQL 查询文件的变化，并且在文件发生变化后，自动进行编译。
如果想要手动进行编译，我们可以使用如下命令：
$ dww-relay-compiler
示例代码
我们来看一个实际的使用示例：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------- - ---- --------------
------ ----------- ---- -----------------------
----- --- ------- --------------- -
-------- -
------ -
-----
------ --------
------
--
-
-
------ ------- --------
----- -------- -
------ -
--
-
-
--
在上面的示例代码中，我们可以看到，我们在一个简单的 React 组件中使用了 GraphQL 查询。同时，在文件末尾，使用了一个 graphql 模板字符串，来指定查询的内容。这个字符串会被 dww-relay-compiler 自动编译成对应的查询代码。
总结
通过这篇文章，我们了解了如何使用 dww-relay-compiler，并且掌握了详细的配置和使用方法。当我们使用 GraphQL 进行开发时，dww-relay-compiler 会是一个非常好的帮手，让我们能够更加轻松地进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc281e8991b448e63f5