前言
在前端开发中，我们经常需要在项目中使用静态数据，比方说一些配置信息或者数据字典等等。我们可以将这些数据存放在一个 json 文件中，但是在实际开发中，我们可能还需要将这些数据转化为多个文件，比如将一个 json 文件中的每一项作为一个 markdown 文件存储，或者将每一项作为一个 html 文件存储等等。metalsmith-remote-json-to-files 正是用来解决这个问题的。
metalsmith-remote-json-to-files 是什么？
metalsmith-remote-json-to-files 是一个 npm 包，主要用来将远程的 json 数据文件解析并生成多个文件。它基于 Metalsmith 构建和解析静态文件，并支持从一个远程的 json 文件中读取数据，根据指定的模板生成多个文件。
metalsmith-remote-json-to-files 的安装
要安装 metalsmith-remote-json-to-files，我们需要先在本地全局安装 Metalsmith 和 node-fetch 的 npm 包。在安装完这两个包之后，我们就可以全局安装 metalsmith-remote-json-to-files 了。
npm install -g metalsmith npm install -g node-fetch npm install -g metalsmith-remote-json-to-files
metalsmith-remote-json-to-files 的使用
1. 创建 Metalsmith 项目
首先，我们需要创建一个 Metalsmith 项目。在项目根目录下，创建一个 src 目录，并在其中创建一个 index.md 文件。
-- -------------------- ---- ------- --- ------ -------- --- -- ---- ---------------- - -- - -- - --
然后，在项目根目录下创建一个 metalsmith.js 文件。metalsmith.js 用于配置 Metalsmith 的所有插件。
-- -------------------- ---- -------
----- ---------- - ---------------------
----- -------- - ------------------------------
----- --------- - -------------------------------
---------------------
-----------
----- -
------ --- ------ ------
---- ---------------------
-
--
----------------
-----------------------
------------
----------------
----------------
------- ------------
---
-------------------- ------ -
-- ----- -
----- ---
-
---2. 创建远程 json 文件
在项目下创建一个 data 目录，在其中创建一个 languages.json 文件。
-- -------------------- ---- -------
-
----- -
-------------- ----------
------ ------
--
----- -
-------------- ---------
------ ------
--
----- -
-------------- ----------
------ ------
-
-3. 使用 metalsmith-remote-json-to-files
现在，我们已经有了 Metalsmith 项目和远程的 json 数据文件了。接下来，我们需要在 Metalsmith 项目中使用 metalsmith-remote-json-to-files 插件。
在 metalsmith.js 文件中添加以下代码：
-- -------------------- ---- -------
----- ---------- - ---------------------
----- -------- - ------------------------------
----- --------- - -------------------------------
----- ---------- - ------------------------------------------
---------------------
-----------
----- -
------ --- ------ ------
---- ---------------------
-
--
----------------
-----------------------
------------
----------------
-----------------
---- -------------------------------------
--------- ------------
---------- -
---------------- -
----- -------------------------
----- -
------ --------- - - ------------------------
------------ ------------------------
---- ---------------
-
-
-
---
----------------
------- ------------
---
-------------------- ------ -
-- ----- -
----- ---
-
---上述配置中的 remoteJson 插件的配置项中，src 为 json 数据文件的远程地址，property 为 json 数据对象的属性名，templates 为需要生成的文件模板配置。在此例中，我们输入了一个名为 'language.html' 的模板，然后为每个语言项生成一个以该项 key 命名的文件，例如英文对应的文件为 './build/languages/en.html'。
总结
在这篇文章中，我们介绍了 npm 包 metalsmith-remote-json-to-files 的使用方法。通过这个工具，我们可以方便地从一个远程的 json 数据文件中读取数据，并生成多个静态文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d36