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

本文小编为大家详细介绍“Node怎么实现浏览器预览项目所有图片”，内容详细，步骤清晰，细节处理妥当，希望这篇“Node怎么实现浏览器预览项目所有图片”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

10年积累的成都做网站、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有都昌免费网站建设让你可以放心的选择与我们合作。

在前端实际项目开发中，会有这样一种场景。每次引入新的图片，并不知道这个资源是否被引用过，所以会点开存放图片的资源一个个去看。实际问题是：

• 1.图片并不是放到一个目录下的，可能存在任何的地方，不好查找

• 2.费时间，费力

• 3.可能会重复引入图片资源

如果有个能力，将项目图片资源罗列到一起查看，并方便看到引入路径的话，就会大大节约开发的体力活。

需求分析

• 可以集成到任何前端项目中，那就要求是个npm包

• 读取文件，分析哪些是图片，将图片资源通过img标签写入到html文件中

• 创建一个服务器，将html渲染出来

这就需要借助Node来实现，需要用到的 fs path http 模块。

实现

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       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 `