在前端實際專案開發中，會有這樣一種場景。每次引入新的圖片，並不知道這個資源是否被引用過，所以會點開存放圖片的資源一個個去看。實際問題是：
1.圖片並不是放到一個目錄下的，可能存在任何的地方，不好找
2 .費時間，費力
3.可能會重複引入圖片資源
如果有個能力，將項目圖片資源羅列到一起查看，並方便看到引入路徑的話，就會大大節約開發的體力活。
如果要做這樣的能力，該考慮什麼呢？
可以整合到任何前端專案中，那就要求是個npm套件
讀取文件，分析哪些是圖片，將圖片資源透過img標籤寫入到html檔案中
建立一個伺服器，將html渲染出來
這就需要藉助Node來實現，需要用到的fs path http模組。 【相關教學推薦：nodejs影片教學、程式設計教學】
npm init
test-read- img
"bin": {
"readimg": "./index.js"
},#!/usr/bin/env node console.log('111')
npm link
readimg
"scripts": {
"test": "readimg"
}, "scripts": {
"test": "readimg"
},npm run test
在test-read-img 專案中，宣告一個執行函數，並執行.
#!/usr/bin/env node
const init = async () => {
const readFiles = await getFileFun();
const html = await handleHtml(readFiles);
createServer(html);
}
init();這裡解釋一下，各函數作用handleHtml
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
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}' / alt="Node實戰學習：瀏覽器預覽專案所有圖片" > </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 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
}
以上就是實作過程，執行一下
npm publish
#為什麼要用非同步讀取檔案？
因為js是單線程，同步讀取檔的話會卡在那裡，不能執行其他了。
為什麼要用Promise 收集圖片
因為不知道什麼時候讀取完文件，當非同步讀取完再用Promise.all整體處理
為什麼不讀取新的html文件，而將結果直接傳回瀏覽器？
如果將轉換後html放到 test-read-img 文件，就必須將圖片資源也要產生在目前目錄，不然html 讀取的相當路徑資源是找不到的，因為資源都在使用專案中。結束的時候還要將圖片資源刪除，這也無形增加了複雜度；
如果將轉換後的html 寫入放到使用項目中，這樣就可以直接用圖片的路徑，並能正確加載，但是這樣會多了一個html文件，程序退出的時候還要刪除這個，如果忘記刪除了，就可能被開發者提交到遠程，造成污染，提供的預覽應該是無害的。這兩種方式都不可取。因此直接返回html資源，讓它載入相對目標專案路徑，不會產生任何影響。
更多node相關知識，請造訪：nodejs 教學！
以上是Node實戰學習：瀏覽器預覽專案所有圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
