1. 前言
前端开发中，我们经常需要在项目中使用 Markdown 文档来记录项目的需求，API 文档，开发文档等等。但是 Markdown 并不能像 Word 或者 HTML 文件那样方便地插入图片、视频等资源。为了解决这个问题，我们可以使用 bunddown 这个 npm 包来将 Markdown 文件和资源一起打包成一个 HTML 文件，方便地分享和阅读文档。
2. 安装
使用 npm 安装 bundledown：
npm install bundledown --save-dev
3. 使用方法
3.1 基础使用
bundledown 的基础使用方法如下：
const bundledown = require('bundledown');
const options = {
input: 'docs/project.md',
output: 'dist/docs/project.html',
};
bundledown(options);其中 input 指定输入的 Markdown 文件路径，output 指定输出的 HTML 文件路径。执行上面的代码后，会在 dist/docs/ 目录下生成 project.html 文件。
3.2 设置资源路径
bundledown 默认会将 Markdown 文件中的资源（图片、视频等）打包到 HTML 文件中，并且在 HTML 中使用 data URI 的方式来引用这些资源。如果你不想使用 data URI，可以通过设置 assetsPath 选项来指定资源的输出目录。
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ------- - - ------ ------------------ ------- ------------------------- ----------- --------- -- --------------------
执行上面的代码后，会在 dist/assets/ 目录下生成 Markdown 文件中使用到的资源文件，并在 HTML 中使用相对路径来引用这些资源。
3.3 自定义样式
bundledown 支持通过设置 style 选项来自定义 HTML 样式。你可以定义一个包含样式的 <style> 标签，然后将其值作为 style 选项的内容进行传递。
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - -
------ ------------------
------- -------------------------
------ -
---- -
------------ ------ -----------
-
--
--
--------------------执行上面的代码后，生成的 HTML 文档将使用定义的样式。
4. 示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - -
------ ------------------
------- -------------------------
----------- ---------
------ -
---- -
------------ ------ -----------
-
--
--
--------------------以上代码可以将 docs/project.md 文件转换为带资源和样式的 HTML 文件，并输出到 dist/docs/project.html 文件中。执行时，需要在命令行中执行 node filename.js，其中 filename.js 是包含上面代码的文件名。
5. 总结
bundledown 是一个用于打包 Markdown 文档和资源的 npm 包，能够轻松生成可以分享的 HTML 文档。通过设置不同的选项，我们可以自定义生成 HTML 文档的样式和资源路径。希望这篇文章能够帮助大家更好地使用 bundledown，提高 Markdown 文档的分享和阅读效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8eccdc64669dde55ca