站长资讯网
在前端实际项目开发中，会有这样一种场景。每次引入新的图片，并不知道这个资源是否被引用过，所以会点开存放图片的资源一个个去看。实际问题是：
-
1.图片并不是放到一个目录下的，可能存在任何的地方，不好查找
-
2.费时间，费力
-
3.可能会重复引入图片资源
如果有个能力，将项目图片资源罗列到一起查看，并方便看到引入路径的话，就会大大节约开发的体力活。
如果要做这样的能力，应该考虑什么呢？
需求分析
-
可以集成到任何前端项目中，那就要求是个
npm包 -
读取文件，分析哪些是图片，将图片资源通过
img标签写入到html文件中 -
创建一个服务器，将html渲染出来
这就需要借助Node来实现，需要用到的 fs path http 模块。【相关教程推荐：nodejs视频教程、编程教学】
实现
1 实现可发布npm包
-
创建一个项目
npm init包名字是
test-read-img -
在package.json 中加入如下代码
"bin": { "readimg": "./index.js" },
-
在入口文件index.js 中加入测试代码
含义是这个文件是可执行的node文件
#!/usr/bin/env node console.log('111')登录后复制 -
将当前模块链接到全局node_modules模块内，方便调试
执行
npm link执行
readimg就看到输出111 了
到此就实现了通过命令使用npm包的使用了，当项目安装了这个包，并配置执行命令，就可以在别的项目执行设计的npm包了，后面就实现这个
"scripts": { "test": "readimg" },登录后复制
2 集成到别的项目
- 创建一个测试项目 ，执行
npm init - 将测试包集成到当前项目， 执行
npm link test-read-img - 配置执行命令
"scripts": { "test": "readimg" },
执行npm run test
就能看到当前项目执行了读取文件的包的代码了。 现在只输出了 111距离读取文件还很远，下面来实现读取文件
3 读取文件
- 在
test-read-img项目中，声明一个执行函数，并执行.
#!/usr/bin/env node const init = async () => { const readFiles = await getFileFun(); const html = await handleHtml(readFiles); createServer(html); } init();
这里解释一下 ，各函数作用
getFileFun： 读取项目文件，并将读取的图片文件路径返回，这里不需要图片资源，后面解释为什么。
handleHtml: 读取模版html文件, 将图片资源通过 img 承载 生成新的html文件。
createServer : 将生成的html ,放到服务器下去渲染出来。
主流程就是这样。
-
实现
getFileFun功能分析一下这个文件具体要做什么
循环读取文件，直到将所有文件查找完，将图片资源过滤出来，读取文件要异步执行，如何知道何时读取完文件呢，这里用
promise实现，这里仅仅实现了单层文件的读取，因为发布到公司内部的npm，请见谅。 聪明的你这里想想如何递归实现呢？getFileFun： 应该先读取完文件，才能将图片返回，所以异步收集器应该在后面执行。具体代码如下：
const fs = require('fs').promises; const path = require('path'); const excludeDir = ['node_modules','package.json','index.html']; const excludeImg = ['png','jpg','svg','webp']; let imgPromiseArr = []; // 收集读取图片，作为一个异步收集器 async function readAllFile(filePath) { // 循环读文件 const data = await fs.readdir(filePath) await dirEach(data,filePath); } async function handleIsImgFile(filePath,file) { const fileExt = file.split('.'); const fileTypeName = fileExt[fileExt.length-1]; if(excludeImg.includes(fileTypeName)) { // 将图片丢入异步收集器 imgPromiseArr.push(new Promise((resolve,reject) => { resolve(`${filePath}${file}`) })) } } async function dirEach(arr=[],filePath) { // 循环判断文件 for(let i=0;i<arr.length;i++) { let fileItem = arr[i]; const basePath = `${filePath}${fileItem}`; const fileInfo = await fs.stat(basePath) if(fileInfo.isFile()) { await handleIsImgFile(filePath,fileItem) } } } async function getFileFun() { // 将资源返回给调用使用 await readAllFile('./'); return await Promise.all(imgPromiseArr); } module.exports = { getFileFun }登录后复制 -
实现
handleHtml
这里读取 test-read-img 的html文件，并替换。
const fs = require('fs').promises; const path = require('path'); const createImgs = (images=[]) => { return images.map(i => { return `<div class='img-warp'> <div class='img-item'> <img src='${i}' /> </div> <div class='img-path'>文件路径 <span class='path'>${i}</span></div> </div>` }).join(''); } async function handleHtml(images=[]) { const template = await fs.readFile(path.join(__dirname,'template.html'),'utf-8') const targetHtml = template.replace('%--%',` ${createImgs(images)} `); return targetHtml; } module.exports = { handleHtml }
-
实现
createServer这里读取html 文件，并返回给服务器。 这里仅仅实现了对
png的文件的展示，对于其他类型的图片如何支持呢，这里提示一下对content-type进行处理。
const http = require('http'); const fs = require('fs').promises; const path = require('path'); const open = require('open'); const createServer =(html) => { http.createServer( async (req,res) => { const fileType = path.extname(req.url); let pathName = req.url; if(pathName === '/favicon.ico') { return; } let type = '' if(fileType === '.html') { type=`text/html` } if(fileType === '.png') { type='image/png' } if(pathName === '/') { res.writeHead(200,{ 'content-type':`text/html;charset=utf-8`, 'access-control-allow-origin':"*" }) res.write(html); res.end(); return } const data = await fs.readFile('./' + pathName ); res.writeHead(200,{ 'content-type':`${type};charset=utf-8`, 'access-control-allow-origin':"*" }) res.write(data); res.end(); }).listen(3004,() => { console.log('project is run: http://localhost:3004/') open('http://localhost:3004/') }); } module.exports = { createServer }
效果
