在前端开发过程中，经常需要在自己的技术博客或文档中添加目录结构的展示。其实，这个过程可以通过使用 npm 包 markdown-magic-directory-tree 来简化。
安装 markdown-magic-directory-tree
npm 包 markdown-magic-directory-tree 可以通过以下命令进行安装：
npm install markdown-magic-directory-tree --save-dev
同时，我们需要使用另一个包 markdown-magic 来编写自己的 markdown 文件。如果你还没有安装 markdown-magic，可以通过以下命令进行安装：
npm install markdown-magic --save-dev
使用 markdown-magic-directory-tree
markdown-magic-directory-tree 为我们提供了一种方便的方法来展示目录结构。我们可以通过以下步骤来使用该包：
步骤1：在 markdown 文件中插入插入标记
首先，在自己的 markdown 文件中插入以下标记：
<!-- run tree . -->
步骤2：编写 markdown-magic 魔法文件
接着，我们需要编写一段脚本来运行 markdown-magic-directory-tree。我们可以将以下代码放在 markdown-magic 魔法文件的开头：
-- -------------------- ---- -------
----- ------------- - --------------------------
----- ---- - -----------------------------------------
----- ------ - -
----------- -
-----
--
--
---------------------------- --------步骤3：运行 markdown-magic
最后，我们需要在终端中启动 markdown-magic：
npx markdown-magic --config ./.markdown-magic-config.js
示例代码
下面是一个示例 markdown 文件：
-- -------------------- ---- ------- - ---- ---- --- ---- - --- ---- -------------- ----------------- --- -- ---- --------------- - ------------ - ---------------- - ----------------------
同时，我们也需要编写 markdown-magic 配置文件：
{
"transforms": {
"directory-tree": "markdown-magic-directory-tree"
}
}最后，我们运行以下命令即可生成目录结构：
npx markdown-magic --config .markdown-magic-config.js README.md
在 markdown 文件中生成的效果如下：
-- -------------------- ---- -------
- ----
--
--- -------
--- ---------
--- ------------
--- ------
--- --- ----------
--- ---
--- ------
--- --------
-- ----
---------------
- ------------
- ----------------
- ----------------------可以发现，markdown-magic-directory-tree 为我们生成了一个可读性较好的目录结构。这样，我们就能够方便地将目录结构展示在自己的技术文档中了。
学习与指导意义
通过本篇文章，我们学习到了如何使用 markdown-magic-directory-tree 工具来快速生成目录结构。这对于技术博客或文档的撰写是非常有意义的。除此之外，我们还可以通过配置一些参数来产生自定义的目录结构展示。在编写技术文档时，一定要标注文件目录结构，这样读者便能够更加容易地理解项目的组织方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f37e936dbf7be33b2566f61