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

実際のフロントエンドプロジェクトの開発では、このようなシナリオがあるでしょう。新しい写真が紹介されるたびに、このリソースが参照されているかどうかがわからないので、写真が保存されているリソースをクリックして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('111')

#デバッグを容易にするために、現在のモジュールをグローバルの node_modules モジュールにリンクします

• 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

  : 画像を返す前にファイルを最初に読み取る必要があるため、非同期コレクターは後で実行する必要があります。 具体的なコードは次のとおりです: <pre class='brush:php;toolbar:false;'> #!/usr/bin/env node const init = async () =&gt; { const readFiles = await getFileFun(); const html = await handleHtml(readFiles); createServer(html); } init();</pre>

  実装handleHtml

ここを読んでください
• -read-img

  html ファイルをテストし、置き換えます。 <pre class='brush:php;toolbar:false;'> const fs = require(&amp;#39;fs&amp;#39;).promises; const path = require(&amp;#39;path&amp;#39;); const excludeDir = [&amp;#39;node_modules&amp;#39;,&amp;#39;package.json&amp;#39;,&amp;#39;index.html&amp;#39;]; const excludeImg = [&amp;#39;png&amp;#39;,&amp;#39;jpg&amp;#39;,&amp;#39;svg&amp;#39;,&amp;#39;webp&amp;#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(&amp;#39;.&amp;#39;); const fileTypeName = fileExt[fileExt.length-1]; if(excludeImg.includes(fileTypeName)) { // 将图片丢入异步收集器 imgPromiseArr.push(new Promise((resolve,reject) =&gt; { resolve(`${filePath}${file}`) })) } } async function dirEach(arr=[],filePath) { // 循环判断文件 for(let i=0;i&lt;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(&amp;#39;./&amp;#39;); return await Promise.all(imgPromiseArr); } module.exports = { getFileFun }</pre>

実装

createServer

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

png

ファイルの表示のみを実装します。他のタイプの画像をサポートするにはどうすればよいですか?
• content-type

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

      const fs = require('fs').promises;
     const path = require('path');
  
     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="ノード実践学習：プロジェクトの全画像をブラウザでプレビュー" > </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 リソースを直接返して相対ターゲット プロジェクト パスをロードしても影響はありません。

ノード関連の知識の詳細については、nodejs チュートリアル を参照してください。

以上がノード実践学習：プロジェクトの全画像をブラウザでプレビューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。