Node怎么实现浏览器预览项目所有图片

本文小编为大家详细介绍“Node怎么实现浏览器预览项目所有图片”，内容详细，步骤清晰，细节处理妥当，希望这篇“Node怎么实现浏览器预览项目所有图片”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 在前端实际项目开发中，会有这样一种场景。每次引入新的图片，并不知道这个资源是否被引用过，所以会点开存放图片的资源一个个去看。实际问题是：1.图片并不是放到一个目录下的，可能存在任何的地方，不好查找2.费时间，费力3.可能会重复引入图片资源如果有个能力，将项目图片资源罗列到一起查看，并方便看到引入路径的话，就会大大节约开发的体力活。可以集成到任何前端项目中，那就要求是个npm包读取文件，分析哪些是图片，将图片资源通过img标签写入到html文件中创建一个服务器，将html渲染出来这就需要借助Node来实现，需要用到的 fs path http 模块。创建一个项目 npm init包名字是 test-read-img在package.json 中加入如下代码

"bin":{
"readimg":"./index.js"
},

在入口文件index.js 中加入测试代码含义是这个文件是可执行的node文件

将当前模块链接到全局node_modules模块内，方便调试执行 npm link 执行 readimg就看到输出111 了到此就实现了通过命令使用npm包的使用了，当项目安装了这个包，并配置执行命令，就可以在别的项目执行设计的npm包了，后面就实现这个

创建一个测试项目 ，执行 npm init将测试包集成到当前项目， 执行 npm link test-read-img配置执行命令

"scripts":{
"test":"readimg"
},

执行npm run test就能看到当前项目执行了读取文件的包的代码了。
现在只输出了 111距离读取文件还很远，下面来实现读取文件在 test-read-img 项目中，声明一个执行函数，并执行.

#!/usr/bin/envnode
constinit=async()=>{
constreadFiles=awaitgetFileFun();
consthtml=awaithandleHtml(readFiles);
createServer(html);
}

init();

这里解释一下 ，各函数作用getFileFun： 读取项目文件，并将读取的图片文件路径返回，这里不需要图片资源，后面解释为什么。handleHtml: 读取模版html文件, 将图片资源通过 img 承载 生成新的html文件。createServer : 将生成的html ,放到服务器下去渲染出来。主流程就是这样。实现getFileFun 功能分析一下这个文件具体要做什么循环读取文件，直到将所有文件查找完，将图片资源过滤出来，读取文件要异步执行，如何知道何时读取完文件呢，这里用promise实现，这里仅仅实现了单层文件的读取 ，因为发布到公司内部的npm，请见谅。 聪明的你这里想想如何递归实现呢？getFileFun： 应该先读取完文件，才免费云主机、域名能将图片返回，所以异步收集器应该在后面执行。具体代码如下：

实现 handleHtml这里读取 test-read-img 的html文件，并替换。

constfs=require('fs').promises;
constpath=require('path');

constcreateImgs=(images=[])=>{
returnimages.map(i=>{
return`


文件路径${i}

`
}).join('');
}

asyncfunctionhandleHtml(images=[]){
consttemplate=awaitfs.readFile(path.join(__dirname,'template.html'),'utf-8')
consttargetHtml=template.replace('%--%',`
${createImgs(images)}
`);
returntargetHtml;
}

module.exports={
handleHtml
}

实现 createServer这里读取html 文件，并返回给服务器。
这里仅仅实现了对 png的文件的展示，对于其他类型的图片如何支持呢，这里提示一下对 content-type进行处理。

consthttp=require('http');
constfs=require('fs').promises;
constpath=require('path');
constopen=require('open');

constcreateServer=(html)=>{
http.createServer(async(req,res)=>{
constfileType=path.extname(req.url);
letpathName=req.url;
if(pathName==='/favicon.ico'){
return;
}
lettype=''
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
}
constdata=awaitfs.readFile('./'+pathName);
res.writeHead(200,{
'content-type':`${type};charset=utf-8`,
'access-control-allow-origin':"*"
})
res.write(data);
res.end();

}).listen(3004,()=>{
console.log('projectisrun:http://localhost:3004/')
open('http://localhost:3004/')
});


}

module.exports={
createServer
}

以上就是实现过程，执行一下 npm run test就可以看到浏览器执行在http://localhost:3004/, 效果如下：npm login npm publish为什么用异步读取文件？因为js是单线程，同步读取文件的话会卡在那里，不能执行其他了。为什么要用Promise 收集图片因为不知道什么时候读取完文件，当异步读取完再用Promise.all整体处理为什么 不读取新的html文件，而将结果直接返回给浏览器？如果将转换后html放到 test-read-img 文件，就必须将图片资源也要生成在当前目录，要不然html 读取的相当路径资源是找不到的，因为资源都在使用项目中。结束的时候还要将图片资源删除，这也无形增加了复杂度；如果将转化后的html 写入放到使用项目中，这样就可以直接用图片的路径，并能正确加载，但是这样会多了一个html文件，程序退出的时候还要删除这个，如果忘记删除了，就可能被开发者提交到远程，造成污染，提供的预览应该是无害的。这两种方式都不可取。因此直接返回html资源，让它去加载相对目标项目路径，不会产生任何影响。读到这里，这篇“Node怎么实现浏览器预览项目所有图片”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。

相关推荐: jquery有没有trim方法

这篇文章主要介绍“jquery有没有trim方法”，在日常操作中，相信很多人在jquery有没有trim方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jquery有没有trim方法”的疑惑有所帮助！接下来，请跟着小编一起来学…