在前端开发过程中，我们常常需要使用 GraphQL 查询 API，而 Rollup 是一款常用的 JavaScript 模块打包器。npm 包 rollup-plugin-graphql 可以将 GraphQL 查询语句打包到 JavaScript 代码中，方便在浏览器端使用。本文将详细介绍这个 npm 包的使用教程，帮助你轻松使用 rollup-plugin-graphql。
安装
打开终端，执行以下命令：
npm install rollup-plugin-graphql --save-dev
使用
在 rollup 的配置文件中添加 rollup-plugin-graphql 插件:
-- -------------------- ---- -------
------ ------- ---- ------------------------
------ ------- -
------ ---------------
-------- -
----------
-- --- ----
--
-- --- ----
-然后，在 JavaScript 代码中创建 GraphQL 字符串变量：
-- -------------------- ---- -------
-- ------------
------ --- ---- --------------
----- ------------- - ----
----- -------- -
----- -
--
-----
-------
-
-
--rollup-plugin-graphql 将未在项目中被导入的 Graphql 查询语句转化为 JS 模块。在上面的例子中，rollup-plugin-graphql 将把 GET_POST_LIST 转换为导出对象：
-- -------------------- ---- -------
-- ------------ ------ ----------------------
------ ----- ------------- - -
----- -----------
------------ -
-
----- ----------------------
---------- --------
----- - ----- ------- ------ ---------- --
------------- -
----- ---------------
----------- -
-
----- --------
----- - ----- ------- ------ ------- --
------------- -
----- ---------------
----------- -
- ----- -------- ----- - ----- ------- ------ ---- - --
- ----- -------- ----- - ----- ------- ------ ------- - --
- ----- -------- ----- - ----- ------- ------ --------- - -
-
--
----------- --
-
-
--
-------------------- ---
----------- --
-
--
---- - ------ -- ---- -- -
--我们可以使用导出的 GET_POST_LIST 变量来执行查询：
-- -------------------- ---- ------- -- ------------ ----------------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- ------ ------------- -- -- --------- -- ----------- ---------- -- -------------------
配置项
rollup-plugin-graphql 提供以下配置项：
include / exclude
- 类型：字符串 / 正则表达式 / 字符串数组 / 正则表达式数组
- 默认值：undefined
指定需要/排除转化的文件路径。
graphql({
include: 'src/**/*.graphql',
exclude: 'node_modules/**'
})options
- 类型：对象
- 默认值：
{
exclude: /node_modules/,
include: undefined,
moduleName: 'graphql',
options: {}
}使用 rollup-plugin-graphql 的选项。默认情况下，使用 graphql-js 包作为解析器和执行器，以便能够处理查询和突变。options 对象默认传递给 graphql-js。有关可用选项的完整列表，请参阅 graphql-js 文档。
graphql({
options: {
typeDefs: 'type Query { hello: String }',
resolvers: { Query: { hello: () => 'Hello world!' } }
}
})示例代码
下面是完整的示例代码，包含前面提到的所有步骤：
-- -------------------- ---- -------
-- ------------
------ --- ---- --------------
----- ------------- - ----
----- -------- -
----- -
--
-----
-------
-
-
--
----------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ------ ------------- ---
--
--------- -- -----------
---------- -- -------------------# 运行以下命令 rollup -c
总结
本文介绍了如何使用 rollup-plugin-graphql 插件将 GraphQL 查询语句打包到 JavaScript 代码中，并使用这些查询计算。希望这篇文章能够帮助到你更好地使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bda81e8991b448d97f3