Apprentissage pratique du nœud : aperçu dans le navigateur de toutes les images du projet-js tutoriel-php.cn

Apprentissage pratique du nœud : aperçu dans le navigateur de toutes les images du projet

Dans le développement réel d'un projet front-end, il y aura un tel scénario. A chaque fois qu'une nouvelle image est introduite, je ne sais pas si cette ressource a été référencée, je vais donc cliquer sur les ressources qui stockent les images pour les regarder une à une. Les problèmes réels sont les suivants :

1. Les images ne sont pas placées dans un seul répertoire. Elles peuvent exister n'importe où et sont difficiles à trouver. 2. Cela prend du temps et est laborieux. 3. Les images peuvent être introduites à plusieurs reprises. Si vous avez la possibilité de répertorier les ressources d'images du projet et de visualiser facilement les chemins d'introduction, cela économisera considérablement le travail physique de développement.
L'analyse des exigences

package npm

pour lire le fichier, analyser quelles sont les images et transmettre l'image les ressources via img tag sont écrites dans le fichier html

Créez un serveur pour restituer le html

Cela doit être réalisé avec l'aide de Node, ce qui nécessite l'utilisation de fs chemin http module. [Tutoriels associés recommandés : tutoriel vidéo nodejs, Enseignement de la programmation】npm包
读取文件，分析哪些是图片，将图片资源通过img标签写入到html文件中
创建一个服务器，将html渲染出来

这就需要借助Node来实现，需要用到的 fs path http 模块。【相关教程推荐：nodejs视频教程、编程教学】

实现

`1 实现可发布npm包`

创建一个项目 npm init

包名字是 test-read-img
在package.json 中加入如下代码

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

Copier après la connexion

在入口文件index.js 中加入测试代码
含义是这个文件是可执行的node文件
```
  #!/usr/bin/env node
  
  console.log(&#39;111&#39;)
```
Copier après la connexion
将当前模块链接到全局node_modules模块内，方便调试
执行 npm link
执行 readimg
就看到输出111 了
到此就实现了通过命令使用npm包的使用了，当项目安装了这个包，并配置执行命令，就可以在别的项目执行设计的npm包了，后面就实现这个
```
  "scripts": {
   "test": "readimg"
 },
```
Copier après la connexion

`2 集成到别的项目`

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

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

Copier après la connexion

执行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();

Copier après la connexion

这里解释一下，各函数作用

getFileFun：读取项目文件，并将读取的图片文件路径返回，这里不需要图片资源，后面解释为什么。

handleHtml: 读取模版html文件, 将图片资源通过 img 承载生成新的html文件。

createServer : 将生成的html ,放到服务器下去渲染出来。

主流程就是这样。

实现getFileFun 功能

分析一下这个文件具体要做什么

循环读取文件，直到将所有文件查找完，将图片资源过滤出来，读取文件要异步执行，如何知道何时读取完文件呢，这里用promise实现，这里仅仅实现了单层文件的读取 ，因为发布到公司内部的npm，请见谅。聪明的你这里想想如何递归实现呢？

getFileFun：应该先读取完文件，才能将图片返回，所以异步收集器应该在后面执行。

具体代码如下：

    const fs = require(&#39;fs&#39;).promises;
    const path = require(&#39;path&#39;);
    const excludeDir = [&#39;node_modules&#39;,&#39;package.json&#39;,&#39;index.html&#39;];
    const excludeImg = [&#39;png&#39;,&#39;jpg&#39;,&#39;svg&#39;,&#39;webp&#39;];
    
    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(&#39;.&#39;);
        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(&#39;./&#39;);
        return await Promise.all(imgPromiseArr);
     }

    module.exports = {
        getFileFun
    }

Copier après la connexion

实现 handleHtml

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

    const fs = require(&#39;fs&#39;).promises;
   const path = require(&#39;path&#39;);

   const createImgs = (images=[]) => {
       return images.map(i => {
           return `<div class=&#39;img-warp&#39;> 
              <div class=&#39;img-item&#39;>  <img   src=&#39;${i}&#39; / alt="Apprentissage pratique du nœud : aperçu dans le navigateur de toutes les images du projet" > </div>
              <div class=&#39;img-path&#39;>文件路径 <span class=&#39;path&#39;>${i}</span></div>
            </div>`
       }).join(&#39;&#39;);
   }

   async function handleHtml(images=[]) {
       const template =   await fs.readFile(path.join(__dirname,&#39;template.html&#39;),&#39;utf-8&#39;)
       const targetHtml = template.replace(&#39;%--%&#39;,`
        ${createImgs(images)}
       `);
      return targetHtml;
   }

   module.exports = {
    handleHtml
   }

Copier après la connexion

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

  const http = require(&#39;http&#39;);
const fs = require(&#39;fs&#39;).promises;
const path = require(&#39;path&#39;);
const open = require(&#39;open&#39;);

const createServer =(html) => {
  http.createServer( async (req,res) => {
      const  fileType = path.extname(req.url);
      let pathName = req.url;
      if(pathName === &#39;/favicon.ico&#39;) {
        return;
      }
      let type = &#39;&#39;
      if(fileType === &#39;.html&#39;) {
          type=`text/html`
      }
      if(fileType === &#39;.png&#39;) {
         type=&#39;image/png&#39;
      }
      if(pathName === &#39;/&#39;) {
          res.writeHead(200,{
              &#39;content-type&#39;:`text/html;charset=utf-8`,
              &#39;access-control-allow-origin&#39;:"*"
          })
            res.write(html);
            res.end();
            return
      }
      const data = await fs.readFile(&#39;./&#39; + pathName );
      res.writeHead(200,{
          &#39;content-type&#39;:`${type};charset=utf-8`,
          &#39;access-control-allow-origin&#39;:"*"
      })
      res.write(data);
      res.end();
      
  }).listen(3004,() => {
   console.log(&#39;project is run: http://localhost:3004/&#39;)
  open(&#39;http://localhost:3004/&#39;)
  });

 
}

module.exports = {
  createServer
}

Copier après la connexion

效果

以上就是实现过程，执行一下 npm run test就可以看到浏览器执行在http://localhost:3004/, 效果如下：

Apprentissage pratique du nœud : aperçu dans le navigateur de toutes les images du projet

发布

npm login

implémentation🎜🎜

🎜`1 Implémenter le package npm publiable`🎜

npm init

test-read-img

npm link

readimg

🎜`2 Intégrer dans d'autres projets`🎜

npm init code >🎜🎜Intégrez le package de test dans le projet en cours et exécutez <code>npm link test-read-img

npm run test

🎜`3 Lecture du fichier`🎜

test-read-img

getFileFun

handleHtml

img

createServer

getFileFun

promise

lecture de fichier monocouche

getFileFun

handleHtml

test-read-img

createServer

png

content-type

🎜Effect🎜🎜🎜Ce qui précède est le processus d'implémentation Exécutez `npm run test` et vous pouvez voir l'exécution du navigateur dans http : / /localhost:3004/, l'effet est le suivant : 🎜🎜🎜

🎜Publier🎜🎜🎜`Connexion npm`🎜

npm submit npm publish

思考

为什么用异步读取文件？

因为js是单线程，同步读取文件的话会卡在那里，不能执行其他了。
为什么要用Promise 收集图片

因为不知道什么时候读取完文件，当异步读取完再用Promise.all整体处理
为什么不读取新的html文件，而将结果直接返回给浏览器？

如果将转换后html放到 test-read-img 文件，就必须将图片资源也要生成在当前目录，要不然html 读取的相当路径资源是找不到的，因为资源都在使用项目中。结束的时候还要将图片资源删除，这也无形增加了复杂度；

如果将转化后的html 写入放到使用项目

Réflexion
- Pourquoi utiliser la lecture asynchrone des fichiers ?
Étant donné que js est monothread, si vous lisez le fichier de manière synchrone, il y restera bloqué et ne pourra rien exécuter d'autre.
Pourquoi utiliser Promise pour collecter des images
🎜Parce que nous ne savons pas quand le fichier a été lu Une fois la lecture asynchrone terminée, utilisez Promise.all pour le traitement global🎜🎜.
🎜Pourquoi au lieu de lire un nouveau fichier html, renvoyer les résultats directement au navigateur ? 🎜🎜Si vous mettez le html converti dans le fichier test-read-img, les ressources image doivent également être générées dans le répertoire courant, sinon le chemin équivalent pour la lecture du html sera La ressource introuvable car les ressources se trouvent dans le projet utilisateur. À la fin, les ressources de l'image doivent être supprimées, ce qui augmente également la complexité de manière invisible ; 🎜🎜Si vous écrivez le html converti dans le projet d'utilisation, vous pouvez directement utiliser le chemin de l'image ; peut être chargé correctement, mais cela ajoutera un fichier html, qui devra être supprimé à la fermeture du programme. Si vous oubliez de le supprimer, il peut être soumis à un emplacement distant par le développeur, provoquant une pollution. inoffensif. Aucune des deux approches n’est recommandée. Par conséquent, renvoyer directement la ressource HTML et la laisser charger le chemin relatif du projet cible n'aura aucun impact. 🎜🎜🎜🎜Pour plus de connaissances sur les nœuds, veuillez visiter : 🎜tutoriel Nodejs🎜 ! 🎜