本文已参与「新人创作礼」活动，一起开启掘金创作之路。
——Bug修复员-鲁宽宽
前言
系列二讲述了如何从零到一搭建简单实用的npm包，也是核心的实现。
系列三讲述了如何解析注释并通过VuePress搭建文档说明页面。
此篇是在两者的基础上，设计一款简单、灵活的预览验证页面-源码。
预期效果
关于这个验证页面，我想过它是什么样子的，也想过它的作用是什么。
如在使用Lodash的时候，只需项目引入，按照api说明使用即可，不依赖有验证页面。
不过sdk的类库，由于需要运行环境，故需要有页面提供给客户端进行功能验证。
结合两者，在开发自己库包的时候，也就将验证页面此功能给保留了下来。
整体效果如下图，扫描二维码即可验证当前功能：
具体实现
由上图我们可以发现其实验证页面是不会经常变动的。所以它应该只是一个壳子，内容由外部数据动态渲染更合理些。
需要实现此效果只需要考虑两点就行：
- 远程加载全量API数据，二维码url只携带方法名
- 远程加载构建后的库包，达到每次的包都为最新的
远程加载的这些数据是怎么生成的呢？其实在系列二已经准备好了。系列二读取注释并解析为数组对象，只需要将这个数据写入js文件，部署到服务器即可。
api数据
部分代码实现，具体的可以在源码内查看。
// 项目目录
|- build
|-docs
index.js
// 1、------index.js
let allFilesContent = ''
allFiles.forEach(item => {
const fileContent = fs.readFileSync(item, 'utf-8');
allFilesContent += fileContent
})
// 2.处理 allFilesContent 内容，对注释进行提取为数组对象
const contentList = formatContent(allFilesContent);
// console.log('contentList---', contentList)
// 2、-------写入js
// 在docs页面写入api 此处写进了vuepress静态资源下，远程访问这个地址就可以了
const writeDocsPath = resolve('docs/.vuepress/public/js-utils-api.js');
writeApiList(writeDocsPath, contentList);
// writeApiList
/**
* 写入sdkApi文件,提供测试页面使用
* @param {String} writeDocsPath - 写入文件的路径
*/
exports.writeApiList = (writeDocsPath, contentList) => {
let result = 'window.JSUTILSAPI = ' + JSON.stringify(contentList);
fs.writeFile(writeDocsPath, result, 'utf8', function (error) {
if (error) {
throw error;
}
});
}
搞定，简单粗暴。下一步是处理源码build的结果。
库包处理
build命令会生成一份在浏览器运行的代码（index.umd.min.js），只需要将这份文件copy到vuepress静态资源下即可。
// 项目目录
|- build
|-docs
index.js
// 1、------index.js
// 在docs页面写入sdk通信js
const copyFromPath = resolve(`lib/index.umd.min.js`);
const copyToPath = resolve('docs/.vuepress/public/js-utils-min.js');
copySdkJs(copyFromPath, copyToPath)
// 2、------copySdkJs.js
/**
* 复制dist下build的sdkjs到文档服务器
* @param {String} copyFromPath - 源文件地址
* @param {String} copyToPath - 目标文件地址
*/
exports.copySdkJs = (copyFromPath, copyToPath) => {
fs.copyFileSync(copyFromPath, copyToPath);
}
搞定，接下来只要在验证页面引入这两个文件就行。
验证页面加载
1、用户扫描二维码-jintingyo.com/h5/js-utils…
2、页面加载Api数组与库包源码，具体如下：
// 获取 JSUTILS 源码
const getSdkJs = () => {
getScript(JS_UTILS_MIN_API, () => { JSUTILS = window.JSUTILS || {} })
}
// 获取 JSUTILS 方法集合 用于匹配扫码展示
const getSdkApi = () => {
getScript(JS_UTILS_API, () => {
JSUTILSAPI = window.JSUTILSAPI || []
if (JSUTILSAPI && JSUTILSAPI.length) {
findMethodNameData(JSUTILSAPI)
}
}
)
}
// 查找当前url方法名所对应的数据
const findMethodNameData= (list: jsUtilsApiType[]) => {
let data = list.find(item => item.name.trim() == methodName)
if (data && data.name) {
curDataSource.value = data
inputValue.value = data.parameter || ''
}
}
完事儿，这样验证页面未来基本上不需要有迭代，且每次都是使用的最新的包。
结语
此篇是此系列的最后一篇，整个系列描述了是如何构建一款简单实用的库包。其中主要想传达的是设计思路，也希望它可以帮助到一些人，毕竟踩过坑才知道不易。
感谢阅读~
获取知识、沉淀总结、分享经验、收获快乐。
