在前端开发中，封装一个 npm 包是很常见的事情。然而，为了方便别人使用自己的包，在推荐使用文档生成器和打包工具进行开发和打包。这篇文章将带你学习如何使用 docz-rollup 这样的工具，让你的 npm 包变得更简单易用。
什么是 docz-rollup？
docz-rollup 是一款结合了文档生成器 docz 和打包工具 rollup 的 npm 包打包工具。docz 是一个基于 Markdown 的文档生成器，对于编写组件库或者一些开放的 api 具有很大的作用。而 rollup 则是一个常用的打包工具，它可以将我们编写的各种代码打包成一个通用的 npm 包。两者结合起来，使用者可以通过 docz 生成的文档了解我们封装的组件和 api，同时通过 rollup 打包生成的文件使用我们的组件和 api。
如何使用 docz-rollup？
安装和初始化
首先，我们需要在 npm 中安装 docz-rollup：
--- ------- ----------- --
然后，在你的项目目录下，使用以下命令初始化 docz-rollup：
---- ----
该命令会生成一个 .docz 文件夹，并为我们创建一个默认的之文件。接着，我们需要在 package.json 文件中添加如下代码，来为我们的包添加打包命令：
-
-- ---
---------- -
-------- ------------ ------
--
------- -
------- -------
-------- -----------
--------- -----------
-------- --------------------
-
-- ---
-在命令行运行以下命令进行打包：
--- --- -----
编写文档
编写文档时，我们可以在 .mdx 文件中书写文档。docz 支持 JSX，因此我们可以在文档中嵌入 HTML 和 JSX。同时，docz 支持使用一些自定义组件，例如 、 之类的组件。
下面是一个简单的 .mdx 文件示例：
- ------ ------ - ------- -- ----- ------ ------ - ------ - ---- ------------ ------------- -----------
Props
<Controls component={Button} propSchema={[ { name: "primary", type: "boolean", defaultValue: "false" }, { name: "children", type: "ReactNode", defaultValue: "null" } ]} />
------------- ------ ---- --------------------- ----- ---
--- --
-- ----------- --------------- ------ -------------------- ------------ ------------ --------------- ------- --
-------
-
-- ---
------- -
------- -------
-------- -----------
--------- -----------
-------- ---------------------
-------- -----------
-------------- -
------- -
-------- -
-
------ -------------
------- ----------------------------------------------------------------------------
-
-
-
--
------------------- ----
--
------- ----------------
--------- -------------------
-------- ------------------
-------- -----------------------
-- ---
-打包时，只需在命令行运行：
--- --- -----
然后进行使用，例如在 React 项目中：
------ -------- ---- ------------ --------------- -------------
结语
本文介绍了如何使用 docz-rollup 进行 npm 包的开发和打包。相信，使用 docz-rollup 可以让我们更加轻松便捷的开发自己的 npm 包，并发布到 npmjs.org 等平台供更多人使用和分享。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedae93b5cbfe1ea0610e70