ノード実践学習：プロジェクトの全画像をブラウザでプレビュー-jsチュートリアル-php.cn

ノード実践学習：プロジェクトの全画像をブラウザでプレビュー

青灯夜游

リリース： 2023-01-06 21:00:21

転載

2583 人が閲覧しました

ノード実践学習：プロジェクトの全画像をブラウザでプレビュー

実際のフロントエンドプロジェクトの開発では、このようなシナリオがあるでしょう。新しい写真が紹介されるたびに、このリソースが参照されているかどうかがわからないので、写真が保存されているリソースをクリックして1つずつ見ていきます。実際の問題は次のとおりです:

1. 画像は 1 つのディレクトリに配置されていません。画像はどこにでも存在する可能性があり、見つけるのが困難です。
2時間と労力がかかります
3. 画像リソースは繰り返し導入される可能性があります

能力がある場合は、プロジェクトの画像リソースをまとめてリストしてください。を表示し、導入パスを簡単に確認できるようにすることで、開発の物理的な作業を大幅に節約できます。

そのような能力を身につけたい場合、何を考慮する必要がありますか?

要件分析

## は任意のフロントエンドプロジェクトに統合できますが、その場合は
npm パッケージが必要です
ファイルを読み取り、どの画像が存在するかを分析し、
img タグを通じて画像リソースを HTML ファイルに書き込みます
Createサーバーで html をレンダリングします。

これはノードの助けを借りて実現する必要があり、使用する必要があります

fs path http モジュール。 [関連チュートリアルの推奨事項: nodejs ビデオチュートリアル、プログラミング教育 ]

実装

#1 実装公開可能な npm パッケージ

プロジェクトの作成
npm init
パッケージ名は
test-read- img
次のコードを package.json

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

ログイン後にコピー

エントリファイルindex.jsに追加します。テストコードを追加します。
これは、このファイルが実行可能なノードファイルであることを意味します。
```
  #!/usr/bin/env node
  
  console.log(&#39;111&#39;)
```
ログイン後にコピー
npm link
Execute
readimg
を実行すると、出力 111
が表示されます。これで、npm の使用が理解できました。コマンドパッケージを使用した後、プロジェクトがパッケージをインストールして実行コマンドを設定すると、設計された npm パッケージを他のプロジェクトで実行できるようになり、これは後で実装されます。
##2 他のプロジェクトに統合する

テストプロジェクトを作成して実行する npm initテストパッケージを他のプロジェクトに統合する現在のプロジェクトで、

npm link test-read-img

設定実行コマンド

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

ログイン後にコピー

Executionnpm run test
現在のプロジェクトが、ファイルを読み取るパッケージのコードを実行していることがわかります。現時点では 111 のみが出力されていますが、ファイルの読み取りにはまだ程遠いです。ファイルの読み取りを実装しましょう

3 ファイルの読み取り

test-read-img プロジェクト内で実行関数を宣言し、実行します。

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

ログイン後にコピー

各関数の機能について説明します

#getFileFun : プロジェクトファイルを読み込み、読み込んだ画像ファイルのパスを返します。画像リソースは必要ありません。理由は後述します。

handleHtml

: テンプレート HTML ファイルを読み取り、

img

を介して画像リソースを渡すことによって新しい HTML ファイルを生成します。

createServer

: 生成された HTML をサーバーに配置し、レンダリングします。主な処理はこんな感じです。

実装getFileFun関数

このファイルが何を行うべきかを正確に分析します

promise
を使用して実装されています。ここでは、 単一レイヤーファイルの読み取りのみが実装されています. 、社内のnpmに公開しているのでご容赦ください。賢い人なら、それを再帰的に実装する方法を考えてみませんか?
getFileFun
: 画像を返す前にファイルを最初に読み取る必要があるため、非同期コレクターは後で実行する必要があります。具体的なコードは次のとおりです: <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
-read-img
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>

createServer

ここで HTML ファイルを読み込み、サーバーに返します。これは

png

content-type

を処理するための注意事項を次に示します。

    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; /> </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
   }

ログイン後にコピー

効果上記は実装プロセスです。

npm run test を実行すると、ブラウザの実行が確認できます。

http://localhost:3004/

では、効果は次のようになります:

##Publish# #npm ログイン

npm public

思考

なぜファイルの非同期読み取りを使用するのでしょうか?

js はシングルスレッドであるため、ファイルを同期的に読み取ると、そこでスタックして他を実行できなくなります。
Promise を使用して画像を収集する理由

ファイルがいつ読み取られたかわからないため、非同期読み取りが完了したらファイルを使用できるからですPromise.all 全体の処理
新しい HTML ファイルを読み取って、結果をブラウザに直接返してみませんか?

変換された html を test-read-img ファイルに配置する場合、画像リソースも現在のディレクトリに生成する必要があります。そうしないと、HTML がread リソースが使用プロジェクト内にあるため、同等のパスのリソースが見つかりません。最後に、画像リソースを削除する必要がありますが、これも複雑さを増します;

変換された html を使用プロジェクト に書き込むと、画像の直接パスを使用できるようになり、正しくロードされますが、HTML ファイルが追加されるため、プログラムの終了時に削除する必要があります。削除し忘れると、開発者によってリモートの場所に送信され、汚染が発生する可能性があります。提供されるプレビューは無害である必要があります。の。どちらのアプローチもお勧めできません。したがって、HTML リソースを直接返して相対ターゲットプロジェクトパスをロードしても影響はありません。