検索

ホームページ  >  記事  >  ウェブフロントエンド  >  ノード実践学習：プロジェクトの全画像をブラウザでプレビュー

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

青灯夜游
青灯夜游転載
2023-01-06 21:00:212615ブラウズ

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

実際のフロントエンドプロジェクトの開発では、このようなシナリオがあるでしょう。新しい写真が紹介されるたびに、このリソースが参照されているかどうかがわからないので、写真が保存されているリソースをクリックして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:js;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:js;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(&#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 リソースを直接返して相対ターゲット プロジェクト パスをロードしても影響はありません。

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

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

json html npm 递归 循环 线程 JS promise 异步 http
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：var、let、const の違いについて話しましょう (コード例)次の記事：var、let、const の違いについて話しましょう (コード例)

関連記事

続きを見る