実際のフロントエンドプロジェクトの開発では、このようなシナリオがあるでしょう。新しい写真が紹介されるたびに、このリソースが参照されているかどうかがわからないので、写真が保存されているリソースをクリックして1つずつ見ていきます。実際の問題は次のとおりです:
1. 画像は 1 つのディレクトリに配置されていません。画像はどこにでも存在する可能性があり、見つけるのが困難です。
2時間と労力がかかります
3. 画像リソースは繰り返し導入される可能性があります
能力がある場合は、プロジェクトの画像リソースをまとめてリストしてください。を表示し、導入パスを簡単に確認できるようにすることで、開発の物理的な作業を大幅に節約できます。
そのような能力を身につけたい場合、何を考慮する必要がありますか?
npm パッケージが必要です
img タグを通じて画像リソースを HTML ファイルに書き込みます
fs path http モジュール。 [関連チュートリアルの推奨事項: nodejs ビデオ チュートリアル 、プログラミング教育 ]
npm init
test-read- img
"bin": {
"readimg": "./index.js"
},#!/usr/bin/env node console.log('111')
npm link
Execute
を実行すると、出力 111
が表示されます。これで、npm の使用が理解できました。コマンド パッケージを使用した後、プロジェクトがパッケージをインストールして実行コマンドを設定すると、設計された npm パッケージを他のプロジェクトで実行できるようになり、これは後で実装されます。
##2 他のプロジェクトに統合する設定実行コマンド "scripts": {
"test": "readimg"
},npm run test3 ファイルの読み取り
プロジェクト内で実行関数を宣言し、実行します。 "scripts": {
"test": "readimg"
},: プロジェクトファイルを読み込み、読み込んだ画像ファイルのパスを返します。画像リソースは必要ありません。理由は後述します。 : テンプレート HTML ファイルを読み取り、
img を介して画像リソースを渡すことによって新しい HTML ファイルを生成します。
: 生成された HTML をサーバーに配置し、レンダリングします。 主な処理はこんな感じです。
実装getFileFun関数
このファイルが何を行うべきかを正確に分析します
を使用して実装されています。ここでは、 単一レイヤー ファイルの読み取りのみが実装されています. 、社内のnpmに公開しているのでご容赦ください。賢い人なら、それを再帰的に実装する方法を考えてみませんか?
: 画像を返す前にファイルを最初に読み取る必要があるため、非同期コレクターは後で実行する必要があります。 具体的なコードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> #!/usr/bin/env node
const init = async () => {
const readFiles = await getFileFun();
const html = await handleHtml(readFiles);
createServer(html);
}
init();</pre><div class="contentsignin">ログイン後にコピー</div></div>
実装handleHtml
html ファイルをテストし、置き換えます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> 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
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
ここで 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
}効果上記は実装プロセスです。
npm public
なぜファイルの非同期読み取りを使用するのでしょうか?
js はシングルスレッドであるため、ファイルを同期的に読み取ると、そこでスタックして他を実行できなくなります。
Promise を使用して画像を収集する理由
ファイルがいつ読み取られたかわからないため、非同期読み取りが完了したらファイルを使用できるからですPromise.all 全体の処理
新しい HTML ファイルを読み取って、結果をブラウザに直接返してみませんか?
変換された html を test-read-img ファイルに配置する場合、画像リソースも現在のディレクトリに生成する必要があります。そうしないと、HTML がread リソースが使用プロジェクト内にあるため、同等のパスのリソースが見つかりません。最後に、画像リソースを削除する必要がありますが、これも複雑さを増します;
変換された html を使用プロジェクト に書き込むと、画像の直接パスを使用できるようになり、正しくロードされますが、HTML ファイルが追加されるため、プログラムの終了時に削除する必要があります。削除し忘れると、開発者によってリモートの場所に送信され、汚染が発生する可能性があります。提供されるプレビューは無害である必要があります。の。どちらのアプローチもお勧めできません。したがって、HTML リソースを直接返して相対ターゲット プロジェクト パスをロードしても影響はありません。
ノード関連の知識の詳細については、nodejs チュートリアル を参照してください。
以上がノード実践学習：プロジェクトの全画像をブラウザでプレビューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
