背景：前端组支持了众多的项目，如何快速统计各个项目使用的依赖包？
这个问题常规方式是去查看每个项目的package.json，然后汇总成表格后反馈结果。这种方式最大的成本在于人工翻阅目录，整理表格数据，这中间很容易出错，而且也不容易展示出前端同学的成绩。
身为前端同学，我们就要用前端的方式来展现我们的项目-获取依赖包信息，展示到网页上。
本文技术要点
node解析package.json
本地服务http-server
shell脚本自动拉取代码
git稀疏检出
下面我们沿着前面的技术要点分别说一下
获取数据源
这里先手动拷贝package.json，到shell那部分时，改成自动获取
创建项目结构
P
|---A
||---package.json
P根目录，A是其中一个需要统计的项目，我们需要从package.json文件中读取dependencies下的模块信息。
利用node的fs模块来实现这个目标，在根路径下新建getData.js文件
代码如下
getData.js
const fs = require('fs')const path = require('path')const { log } = console;/*** 获取路径下package.json文件列表*/function readFileList(dir, filesList = []) { const files = fs.readdirSync(dir) files.forEach(item => { const fullPath = path.join(dir, item) const stat = fs.statSync(fullPath) if (stat.isDirectory()) { readFileList(fullPath, filesList) } else { if( fullPath.indexOf('package.json') > -1 ){ filesList.push(fullPath) } } })}let filesList = [];readFileList(__dirname, filesList);/*** 生成便于页面展示的json数据*/let depData = []filesList.forEach(item => { const data = fs.readFileSync(item, { encoding: 'utf-8' }) let _data = JSON.parse(data) let _tempData = {} _tempData['name'] = _data.name; _tempData['dependencies'] = _data.dependencies; depData.push(_tempData)})/*** 把收集到的信息写入data.json文件，供网页展示*/fs.writeFile('./data.json', JSON.stringify(depData), err => { if( err ) { log(err) } else { console.log('get data success!!!!') } })在命令行执行:
node getData.js
生成需要的数据源 data.json
结构如下:
[ { "name":"h5-a", "dependencies":{ "@babel/compat-data":"^7.11.0", "axios":"^0.19.2", "core-js":"^3.6.4", "dayjs":"^1.8.22", "flex.css":"^1.1.7", "js-cookie":"^2.2.1", "qs":"^6.9.1", "vant":"^2.5.4", "vue":"^2.6.11", "vue-axios":"^2.1.5", "vue-localstorage":"^0.6.2", "vue-router":"^3.1.5", "vuex":"^3.1.2" } }]接下来就是把数据展示到网页上，这里利用本地vue文件来处理，ajax请求获取数据
直接上代码
index.html
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style type="text/css"> .flex {display: flex; justify-content:space-between;} ul {margin:0; padding:0;} li {list-style: none;} li:hover {background:rgb(188, 143, 143)} p { margin:2px 0;} div {flex:1;border-right:1px solid #ccc;} div:nth-of-type(2n) {background:#ece6e665} .title { font-weight: bolder; text-align: center; } .item-title{padding-left: 8px; background: #cbb9eb57;} .item-value{text-align: right;}style>head><body> <section id="app" class="flex"> <div v-for="(item, index) in dataList" :key="index"> <p class="title">{{ item.name }}p> <ul> <li v-for="(value, name) in item.dependencies" :key="value"> <p class="item-title">{{ name }}p> <p class="item-value">{{ value }}p> li> ul> div> section> <script src="./vue.min.js">script> <script> const app = new Vue({ el: '#app', data: { dataList: null }, mounted() { this.getData(); }, methods: { getData() { const _this = this; const request = new XMLHttpRequest(); request.overrideMimeType("application/json"); request.open('GET', './data.json', true); request.onreadystatechange = function () { if (request.readyState === 4 && request.status === 200) { _this.dataList = JSON.parse(request.responseText) console.log(_this.dataList) } else { console.log('error') } } request.send(null); } }, })script>body>html>数据和展示的页面都已经准备就绪，再来一个web服务就可以启动查看效果了。
http-server
我选择了npm包http-server来做web服务，非常的便捷。
先安装http-server模块，可以全局安装，这样随时随地可以启动你的web服务了
npm install -g http-server
安装后，打开命令行，在根目录P下执行 http-server，
nick@Z0410100112 MINGW64 /d/p$ http-serverStarting up http-server, serving ./Available on: http://192.168.1.9:8080 http://127.0.0.1:8080Hit CTRL-C to stop the server打开浏览器，输入地址http://127.0.0.1:8080，就可以访问页面看看效果了
这样我们就完成了对项目依赖包的解析，本地web服务的展示了。
shell+git稀疏检出
上面的demo中我们只用了一个项目，如果有多个项目呢，还这样效率就有点低了。于是就有个问题，能不能自动去拉取项目的package.json文件呢？
经过一番思考，找到解决方案了，利用shell脚本来自动执行git拉取代码的命令，多个项目，就循环执行就好了。由于我们只需要package.json文件，所以还需要配置git的稀疏检出。
在根目录P下面新建pull.sh文件，
pull.sh
#!/bin/bashecho "Start to pull file"# 配置多个项目的git地址project_git=('git@git.x.com:fe/h5-a.git''git@git.x.com:fe/h5-b.git''git@git.x.com:fe/h5-c.git''git@git.x.com:fe/h5-d.git')for item in ${project_git[*]}do echo $item name=${item#*/} name=${name%.git} echo ${name} mkdir ${name} cd ${name} git init git remote add origin ${item} # 配置稀疏检出 git config core.sparseCheckout true # 只检出package.json文件 echo 'package.json' >> .git/info/sparse-checkout git pull origin master cd ../ doneecho "Finished pulling file"#拉取文件后，在执行一个命令，去生成需要的数据node getData.js执行上面的pull.sh脚本，就可以自动完成多项目的package.json文件拉取，生成展示的数据文件。只需要启动本地web服务，就可以展示所有项目的依赖包了。
完整的demo目录结构：
p
├── getData.js
├── index.html
├── pull.sh
└── vue.min.js
执行pull.sh脚本后，目录结构为：
p
├── data.json
├── getData.js
├── h5-a
│ └── package.json
├── h5-b
│ └── package.json
├── h5-c
│ └── package.json
├── h5-d
│ └── package.json
├── index.html
├── pull.sh
└── vue.min.js
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
