什么是 graphql-tag-pluck？
graphql-tag-pluck 是一个 npm 包，用于提取 GraphQL 查询和变量定义，或者其它类型的 gql 标签模板字符串。它可以帮助前端开发者更方便地组织 GraphQL 代码，让代码更易于维护阅读。
如何安装 graphql-tag-pluck？
在终端窗口中，输入以下命令即可安装：
--- ------- ----------------- ----------
如何使用 graphql-tag-pluck？
1. 在 JavaScript 或 TypeScript 代码中使用
假设你有个 GraphQL 查询文件：
----- ------------ ---- -
-------- ---- -
--
----
-----
---
-
-你需要在 JavaScript 或 TypeScript 代码中使用这个查询，可以使用如下代码：
------ - ------------- - ---- -------------------- ----- -------- - ----------------------------- ----- - ------ --------- - - ------------------------ ------------------ -----------
上述代码将从 query.graphql 文件中提取出 query 和 variables 变量，并将它们打印出来。
2. 在构建过程中使用
在构建过程中，可以使用 graphql-tag-pluck 提取代码中的 GraphQL 查询和变量，以将代码打包到最终的 JavaScript 或 TypeScript 文件中。
要使用 graphql-tag-pluck，你需要在 webpack.config.js 或者其它构建配置文件中，使用 graph-loader 和 include 配置如下：
-------------- - -
-- ---
------- -
------ -
-
----- -------------------
-------- ---------------
---- -
-
------- ---------------
-------- -
------------ -
-------- -- ----- -------------- ----------- ----- ---
--
--
--
--
--
-- ---
--
--
-------- -
----------- ------- ------- ------ ------- ----------- --------
--
--这样，你就可以在项目中使用 gql 模板字符串，webpack 会自动提取并打包到最终的 JavaScript 或 TypeScript 文件中。
graphql-tag-pluck 的更多功能
1. 支持多种语言
graphql-tag-pluck 不仅支持 GraphQL 查询文件，还支持多种语言的 gql 标签，例如 TypeScript 和 Babel：
----- ----- - ----
----- ------------ ---- -
-------- ---- -
--
----
-----
---
-
-
-------- --- ---- --------------
----- ----- - ----
----- ------------ ---- -
-------- ---- -
--
----
-----
---
-
-
--2. 支持扫描多个文件
除了从单个 GraphQL 查询文件中提取查询和变量，graphql-tag-pluck 还支持从多个文件中一次性提取。
------ - -------------- - ---- -------------------- ----- --------- - ------------------------------- ------------------------------- ----- - ------ --------- - - -------------------------- ------------------ -----------
3. 支持指定模块和标识符
如果你使用的 gql 模块和标识符与默认设置不同，可以传递 pluckConfig 参数来指定。
------ - ------------- - ---- --------------------
----- -------- - -----------------------------
----- - ------ --------- - - ----------------------- -
------------ -
-------- -- ----- ------------------------ ----------- ------- ---
--
---
------------------ -----------总结
本文介绍了 npm 包 graphql-tag-pluck 的使用方法和更多功能。它可以帮助前端开发者更方便地组织 GraphQL 代码，让代码更易于维护阅读。如果你的项目使用了 GraphQL，不妨试试 graphql-tag-pluck，提高你的开发效率吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/112116