这里我们将介绍 webpack-blocks-graphql 这个优秀的 npm 包，这个包是为了在前端局部管理 GraphQL 的 Schema 和 Mock 数据，可以很好的增强前端的开发体验。
什么是 webpack-blocks-graphql？
webpack-blocks-graphql 是一个 Webpack 扩展，它提供了一组预定义的块，可以方便地实现 GraphQL 的 Schema 和 Mock 数据的管理。
它提供了以下特性：
- 模板字符串的
GraphQL查询转换支持。 TypeScript支持。- 定义
Mock数据支持。 HotModuleReplacement和 开发模式下自动重建支持。
安装
使用 npm 安装：
npm install --save-dev webpack-blocks-graphql
配置
在 Webpack 配置文件中，添加以下规则来处理 GraphQL 文件：
const { createGraphQLBlocks } = require('webpack-blocks-graphql')
module.exports = createConfig([
// ... other blocks
createGraphQLBlocks()
])现在我们可以在项目中使用 .graphql 文件或字符串直接进行查询。
例如，在一个 .graphql 文件中：
query {
posts {
title
}
}可以导入这个查询，然后在代码中使用：
import { graphql } from 'webpack-blocks-graphql/loader'
import query from './query.graphql'
const result = await graphql(query)
console.log(result) // 输出查询结果一个完整的例子
我们将利用该扩展编写一个小应用程序，这个应用程序展示了如何管理开发中的 GraphQL Schema 和 Mock 数据。
项目初始化
创建一个新目录，然后初始化一个新的 npm 包：
mkdir my-project cd my-project npm init -y
将主入口文件更改为 src/index.ts，安装必需的软件包：
npm install --save-dev webpack webpack-cli webpack-blocks webpack-dev-server webpack-blocks-graphql typescript ts-loader
然后在新项目根目录中创建一个 tsconfig.json 文件：
-- -------------------- ---- -------
-
------------------ -
--------- ---------
--------- ---------
------------------ -----
------------ -----
--------- -------
--------- -----
------------------- -------
------ --------
------------------------------- -----
-------------------- ----
--
---------- ------------
-然后在 src 文件夹中创建一个名为 schema.graphql 的文件，以模拟我们的服务端模式。
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- ----- ------- ---------- ------- ------- ------- - ---- ----- - ------ -------- -
然后，我们将创建一个名为 posts.graphql 的文件，它表示一些内存中的 Post 数据。
-- -------------------- ---- ------- - --- ------ -- ------ -------- ---- ---- - --- --- ------ ------- ----- ------- ---------- --------- ------- ------- - ---- ----- - ------ -------- - ------ - ------ ----- -
编写应用程序代码
我们将编写一些应用程序代码，在它们中，我们将查询和呈现我们的测试数据。我们需要创建两个文件：src/index.tsx 和 src/components/App.tsx。
App
这是我们的主 React 组件代码：
-- -------------------- ---- -------
------ - -- ----- ---- -------
------ - ------- - ---- -------------------------------
------ - -------- - ---- ---------------------
------ - --- - ---- --------------
------ - ---------- - ---- --------------
----- ----------- - ----
----- ----- -
----- -
--
-----
------
----
---------
-
-
-
----- ---- - ------- - ----- --- -- -- -
----- - ---- - - -----
------ -
---- --------------
---------------------
------------------
-------
---------------- -- -------------
--------
------
-
-
------ ----- --- - -- -- -
----- - -------- ------ ---- - - ---------------------
------ -
-------------------- -------- -------- ------ ---- ---
-----
-------- -- --------------------
------ -- -
---------- --------------------------- ------- -- -- --------------
--
--------- -- ------ -- --------------------- -- ----- ----------- ----
------
----------------------
-
-index.tsx
这是我们的 React 入口代码：
-- -------------------- ---- -------
------ - -- ----- ---- -------
------ - -- -------- ---- -----------
------ - -------------- - ---- ---------------------
------ ------------ ---- --------------
------ - --- - ---- ------------------
------ ------ ---- ------------------
----- ------ - --- --------------
---- ---------------------------------
--
----------------
--------------- ----------------
---- --------------- --
------------------
------------------------------
-添加 Webpack 配置
创建 webpack.config.js 文件，如下所示：
-- -------------------- ---- -------
----- - ------------ - - -------------------------
----- - -------------------- -------------------- - - ---------------------------------
----- ---- - ---------------
----- ----------------- - ------------------------------
-------------- - --------------
-- -- --
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
--------- -- ----- -------- ---
---
--
---
---------------------
------- -----------------------
----- --------------------------------------------
---
-- -- --
------- -
------ -
-
----- ------------
-------- ---------------
---- --------------
--
--
--
-------- -
----------- ------- ------- ------ --------
--
---
--我们使用了 webpack 扩展 webpack-blocks 的样式来配置 HotModuleReplacement 和加入我们的 GraphQL 规则。现在，运行开发服务器：
npx webpack serve --mode development --open
现在可以访问 http://localhost:8080 了，可以看到正在运行我们的应用程序。
结论
我们已经学习了如何使用非常方便的 webpack-blocks-graphql 扩展来管理我们的 GraphQL Schema 和提供 Mock 数据。这样的所有功能都很容易配置，且能提高前端开发的工作效率。
作为总结，webpack-blocks-graphql 是处理 GraphQL 在前端开发中的最好工具。不仅它提供一组预定义的块来处理 Schema 和 Mock 数据的管理，还可以使用它提供的其他功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601d81e8991b448de486