前言
GraphQL 是一种用于 API 的查询语言和运行时环境。它使得客户端能够精确地获取需要的数据，而不必在请求时提供冗余数据。在前端开发中，GraphQL 成为了越来越流行的解决方案。但是，由于每个 GraphQL 查询都需要编写相应的客户端代码，这使得前端开发变得更加困难。rollup-plugin-graphql-js-client-compiler 这个 npm 包的目的就是让开发者更加容易地在前端应用中使用 GraphQL。
安装
要使用这个 npm 包，你需要在项目中安装它：
npm install rollup-plugin-graphql-js-client-compiler
如何使用
首先，你需要使用 GraphQL 来编写某些查询。接下来，使用 rollup-plugin-graphql-js-client-compiler 编译这些查询。这将生成一个 JavaScript 文件，其中包含可用于在客户端上执行查询的代码。简单来说就是将 graphql 查询文件编译成 js 文件。
让我们看一下 rollup-plugin-graphql-js-client-compiler 的一些用法。
配置 rollup.config.js
你需要在 rollup.config.js 中导入 rollup-plugin-graphql-js-client-compiler：
-- -------------------- ---- -------
------ ------- ---- -------------------------------------------
------ ------- -
------ ---------------
-------- -
---------
-------- ---------------------
-------- ------------------------
--------- --------------------
----------- ---------------------
---
--
------- -
----- ------------------
------- ------
--
--上面的代码中，include 是引入 graphql 文件的路径，exclude 是排除测试文件的路径，compiler 是指定编译器为 graphql-js-client，moduleName 是编译后的模块名。
GraphQL 查询文件
在你的项目中，你需要创建一个或多个 .graphql 文件，其中包含你的查询，例如：
query getBooks {
books {
title
author {
name
}
}
}构建项目
现在，运行构建命令，将编译 GraphQL 查询文件，并生成 JavaScript 文件：
npx rollup -c
现在，你的项目中应该会出现一个 my-graphql-queries.js 文件，其中包含你的所有查询。
在客户端上使用查询
要在客户端上使用查询，请在你的代码中导入编译后的查询文件，并使用你的 GraphQL 客户端执行查询。
// 导入编译后的查询
import { getBooks } from './my-graphql-queries';
// 在客户端上执行查询
client.query({
query: getBooks,
}).then((result) => console.log(result));示例代码
以下是一个包含 GraphQL 查询和使用 rollup-plugin-graphql-js-client-compiler 的示例 JavaScript 文件：
-- -------------------- ---- -------
-- ------------------
----- -------- -
----- -
-----
------ -
----
-
-
-
-- --------
------ ------------ ---- ---------------
------ - -------- - ---- -----------------------
----- ------ - --- --------------
---- ------------------------------
---
--------------
------ ---------
---------------- -- ---------------------结论
rollup-plugin-graphql-js-client-compiler 使得在前端应用中使用 GraphQL 变得更加容易。你可以使用它来将 .graphql 文件编译成可在客户端上执行的 JavaScript 代码，这些代码可以使用你的任何 GraphQL 客户端。在具有大型 GraphQL API 的应用程序中，这是一种非常有用的工具，可以让你更轻松地管理你的查询。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb24b5cbfe1ea0612555