作为前端开发者，我们经常需要使用各种开源库来完成项目的开发。针对 Gatsby 框架的开发， Gatsby-Source-Dailymotion 是一个非常有用的 NPM 包，本文将带领读者深入了解如何使用该 NPM 包，并结合实例代码进行一步步的讲解。
Gatsby-Source-Dailymotion 是什么？
在介绍 Gatsby-Source-Dailymotion 如何使用之前，先来了解一下它是什么。
Gatsby-Source-Dailymotion 是一个 Gatsby 插件，它可以将 Dailymotion 视频作为数据源引入到 Gatsby 项目中。具体来说，该插件提供了一个 GraphQL 查询，可以让我们在 Gatsby 在构建的时候从 Dailymotion 上查询相关的视频信息。
使用步骤
下面是使用 Gatsby-Source-Dailymotion 的详细步骤：
- 安装 npm 包
首先，我们需要在项目根目录下安装 Gatsby-Source-Dailymotion 安装包，可以使用如下命令：
npm install gatsby-source-dailymotion
- 配置插件
在 Gatsby 项目的 gatsby-config.js 文件中，我们需要将 Gatsby-Source-Dailymotion 插件加入到插件数组中，可以在插件数组中加入如下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
-- ----------- --- -----
------------ --------------------
-- ---------- -------- ----
------ ----
-- ------------------------
------------ -----
-- ----------
---------------- -----------------------------
-- -----------------
-------------------------- -- - -- - -- - --- -- -- -
-- ----- ------
------ ------
--
--
-- -------
--
--其中，accessToken 需要替换为我们自己的 Dailymotion API 访问令牌，可以通过下面的地址来申请一个 token https://www.dailymotion.com/settings/developer 。
- 查询数据
Gatsby-Source-Dailymotion 包提供了一个 GraphQL 查询，我们可以使用它来查询 Dailymotion 视频数据。下面是一个例子：
-- -------------------- ---- -------
----- ------- -
------------------- -
----- -
-----
-----------
-----
-
-
-- 结果可视化
为了方便展示数据，我们可以在项目中使用 Gatsby 提供的 GraphiQL 接口，在其中进行数据的查询与展示。具体操作如下：
首先启动 Gatsby 项目：
gatsby develop
然后在浏览器的地址栏输入下面的地址：
http://localhost:8000/___graphql
这里的 8000 是 Gatsby 项目启动的端口，可以根据实际情况进行相应的更改。
最后，我们就可以在 GraphiQL 中进行数据查询与展示了。
示例代码
下面是一个针对 Gatsby-Source-Dailymotion 的实例代码：
-- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
------------ --------------------
------ ----
------------ -----
---------------- ----------------------------- -- ----------
-------------------------- -- - -- - -- - --- -- -- -
------ ------
--
--
-- -------
--
---- -------------------- ---- -------
-- -- -------- ---- ----------- --
----- ------- -
------------------- -
----- -
---
------------
-----------
-
-
-结语
Gatsby-Source-Dailymotion 提供了一个方便的方式，可以将 Dailymotion 视频作为数据源引入到 Gatsby 项目中。它的使用步骤和示例代码都十分简单易懂，我们可以按照上述步骤进行调用和使用。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822aee