在前端开发过程中，我们经常需要使用一些数据，比如 API、图片等。这些数据往往需要从远程服务器上下载，一般情况下我们需要手动下载这些数据并手动保存。这样做的缺点是，比较麻烦，容易出错，而且浪费时间。下面介绍一个可以帮助我们自动下载数据的 npm 包 metalsmith-downloader。
简介
metalsmith-downloader 是一个基于 metalsmith 的 npm 包，主要是用来自动从远程服务器下载数据并保存到本地。metalsmith 是一个静态网站生成器，使用 metalsmith-downloader 可以为静态站点自动下载数据。
安装
使用 npm 安装 metalsmith-downloader：
npm install metalsmith-downloader --save-dev
使用
Configuration
在 metalsmith 中使用 metalsmith-downloader 配置参数：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---------- - ---------------------------------
---------------------
-----------------
-
-------- ----------
----------- -
---- ----------------------------------
-------- -
-------------- ------- ------
--
-------- ------ -- -
------ ----------------------- -- -
------ -
----- ------------------
-------- ---------------
-
---
-
-
--
-
-------- ------------
----------- -
---- -----------------------------
-------- ---
-------- ------ -- -
------ ----------------------- -- -
------ -
----- ---------------------------
-------- ------------
-
---
-
-
-
---
------------ ------ -- -
-- ----- -
-----------------
- ---- -
------------------ -----------
-
---Options
必选项：
pattern，一个 glob 字符串，用于匹配需要下载的文件路径。
可选项：
downloader，一个对象，用于配置下载器。url，必选项，一个字符串，用于指定需要下载的文件的路径。headers，可选项，一个对象，用于指定需要传递的 headers。handler，必选项，一个函数，用于处理从远程服务器下载的数据。
在上面的例子中，我们使用了两个 patterns，'/*.md' 和 '/*.jpeg'。它们分别用于匹配需要下载的 markdown 文件和 jpeg 图片。对于这两个 pattern，我们都需要配置 downloader。我们给 outducker 对象传递一个 url、 headers 和一个 handler。url 用于指定需要从远程服务器下载的文件路径，headers 用于指定需要传递的请求头，handler 用于处理从远程服务器下载的数据。
例如，我们有一个远程 API 的地址是 'https://example.com/api/content'，它会返回一个 JSON 格式的字符串，我们需要把这个字符串里面的所有 markdown 转换成一个 {path: xxx, content: yyy} 的数组，最后返回这个数组。这个 handler 函数的实现如下：
(data) => {
return data.results.map(result => {
return {
path: `${result.id}.md`,
content: result.markdown
}
});
}对于一个是从远程服务器下载并保存 jpeg 图片，handler 的实现如下：
(data) => {
return data.results.map(result => {
return {
path: `images/${result.id}.jpeg`,
content: result.image
}
});
}示例
metalsmith-downloader 的使用方法可能有点复杂，为了更好地说明它的用法，下面给出一个完整的例子。
我们需要根据从一个 API 中获取的数据创建一个静态站点，API 的地址是 'https://example.com/api/content'，它返回的数据结构如下：
-- -------------------- ---- -------
-
-------- --
---------- -
-
----- --
----------- -- -------
--
-
----- --
----------- -- -------
--
-
----- --
----------- -- -------
-
-
-我们需要把上面的数据保存到本地使用 metalsmith-downloader，例如，我们需要下载一个 markdown 文件和一个 jpg 文件，它们的 api 路径分别是：
- markdown：'https://example.com/api/content/1'
- jpg：'https://example.com/api/content/image1'
我们需要将上面的数据转化为 {path: 'path/to/file', content: 'file content'} 的形式。具体操作如下：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---------- - ---------------------------------
----- -------- - ---------------------------------
----- ------- - ------------------------------
----- ---- - ----------------
---------------------
-----------------
-
-------- ----------
----------- -
---- ----------------------------------
-------- -
-------------- ------- ------
--
-------- ------ -- -
------ ----------------------- -- -
------ -
----- ------------------
-------- ---------------
-
---
-
-
--
-
-------- -----------
----------- -
---- --------------------------------------------
-------- ---
-------- ------ -- -
------ ----------------------- -- -
------ -
----- --------------------------
-------- ------------
-
---
-
-
-
---
----------------
--------------
------- -------------
---------- -------------------- -----------
-------- --------------
-------- -----------
---
------------ ------ -- -
-- ----- -
-----------------
- ---- -
------------------ -----------
-
---上述代码中，我们使用 metalsmith 计算器 pdf，自动从远程服务器下载数据并保存到本地。在下载器的配置选项中，我们给下载器对象传递了一个 url 和一个 handler。url 指定了需要下载数据的 API 路径，handler 负责把下载的数据处理成形如 {path: xxx, content: yyy} 的形式。对于一个是从远程服务器下载并保存 jpeg 图片，handler 的实现如下：
(data) => {
return data.results.map(result => {
return {
path: `images/${result.id}.jpeg`,
content: result.image
}
});
}我们还使用了其他 metalsmith 插件，在 markdown 中使用了 markdownit 插件，在 layouts 中使用了 handlebars 排版引擎。
总结
使用 metalsmith-downloader 可以帮助我们自动从远程服务器下载数据并保存到本地。使用方法比较复杂，但是使用起来也比较灵活。根据个人的需要，可以配置不同的下载选项，handler 函数可以灵活处理下载的数据，适配不同的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b6d