本文已参与「新人创作礼」活动，一起开启掘金创作之路。
——Bug修复员-鲁宽宽
前言
思考了许久是否写此系列，一方面是方案设计不是最优的，另一方面是个人的能力也是有限。
从前端入门一步步走过来的我，深刻的知道获取知识的不易，所以还是想将自己的经验总结下来，可以作为他人的参考。
此系列主要是讲如何实现符合业务的npm包的搭建。比如：sdk、utils库等。如下图：
如何设计
当初前期搭建项目时，一时陷入了迷茫阶段，不知从何下手。查看前辈们的项目，发现都是整套的脚手架，生搬硬套也是不太理想，然后自我梳理出了一套适合自己的研发方式，以js-utils包为例，主要从以下几个方向设计：
- 构建工具选型
- 文档页面搭建
- 验证页面搭建
构建工具选型
下面介绍两款优秀的构建工具：
Rollup:Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
Webpack:webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。
两者同为模块打包器，但相似却不相同，如何选择取决于具体场景，同时可以参考业内方案，如：
Rollup ：Vue、React-Redux等。
Webpack：Element-ui、Vue-cli等。
由上可知，Rollup偏向应用于js库，Webpack偏向应用于前端工程；
所以最终js-utils选择使用Rollup来进行的构建。
详细的代码会在后续系列说明
文档页面搭建
当构建工具搭建完成后，接下来要考虑的如何搭建一个简洁明了的使用文档。根据javascript文件中的注释信息，一键生成可访问部署的静态网站。
谈到生成docs的库，想必jsdoc都不陌生，先说下我对它的看法吧：
jsdoc库优点：易上手、可配置、快速生成。
jsdoc库缺点：定制化布局繁琐，页面不直观。
下图左侧为jsdoc生成的页面，右侧为VuePress（我选择的此方式）生成的页面
平常浏览Vue、Vue-cli等类似的文档时，显然它们清爽易用的风格值得称赞，因而采用VuePress来搭建~
VuePress：Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构，也就是需要提供markdown的文件。
那么如何把javascript的注释写入md文件是主要困难点，对此我这边也是封装一些函数来帮助自己解析注释并生成md文件。
详细的代码会在后续系列说明
验证页面搭建
测试页面的选型就比较容易了，可以使用vue或者react来搭建。我是使用vue3来实现的。
验证页面尽量满足以下功能：
- 新增库方法，无需改动验证页面
- 新增库方法，验证页面可以获取最新的方法，方便验证
简单来说就是一劳永逸，验证页面开发一次，长久使用。所以它的设计一定要是动态渲染的。
动态获取最新的库包，动态渲染当前方法的信息。效果如下：
详细的代码会在后续系列说明
尝鲜体验
此系列的源码地址：github.com/thisLkk/js-…
体验地址：jintingyo.com/web/js-util…
结语
上述是自己的一些经验，大家可以自行参考，同时欢迎大家及时纠正。感谢大家的阅读~
后续会针对如何搭建工具，如何分析注释等，分别通过不同的文章进行描述。
获取知识、沉淀总结、分享经验，很美妙的过程。
