Webpack はどのようにローダーを実装しますか? (コード付き)

この記事の内容は、Webpack が Loader をどのように実装するかについてです。 (コードを添付します) ある程度参考になるので、困っている友達は参考にしていただければ幸いです。

ローダーを実装するにはどうすればよいですか?

これまでのセクションでローダーについて説明しました。今日はローダーについてさらに学びます。最も暴力的な方法は、ローダーを手動で実装することです。

さて、本題に戻りましょう。

ローダー定義: モジュールのソース コードを変換するために使用されます。ローダーを使用すると、モジュールのインポートまたは「ロード」時にファイルを前処理できます

使いやすい

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            // loader 是导出为一个a函数的 node 模块。该函数在 loader 转换资源的时候调用
            // 给定的函数将调用 loader API，并通过 this 上下文访问
            loader: path.resolve('loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

ローダーの定義と簡単な使用法を確認した後、ローダーの実装のアイデアを分析しましょう

単一の責任、ローダーは 1 つのことだけを実行します

チェーンの組み合わせ、チェーン内の各ローダーが処理されたリソースに変換を適用します

モジュール化、関数のノード モジュールとしてエクスポートされます

パラメータのマージ、ローダーはオプション オブジェクトを通じて設定できます

上記の分析ポイントに基づいて、それを実行し始めました

// 这个就是一个最简单loader，
// 如果我们的loader有依赖其它模块，也得以module的写法将在在顶部引入
import fs from 'fs';
export default function(source){
    return source
}

return は同期クラスであるため、直接上で使用されていることがわかりましたローダーと返されるコンテンツは一意です。ローダーがチェーン呼び出しをサポートし、結果を次のローダーに返して継続的に使用できるようにしたい場合は、webpack が提供する API を使用する必要があります。

ここでは、この .callback の定義を簡単に見てみましょう。.callback は、同期または非同期で呼び出すことができ、複数の結果を返すことができる関数です。予期されるパラメータは

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
)

// loader-utils 它提供了很多有用的工具
// 最常用的一个就是获取传入 loader 的 options
import { getOptions } from 'loader-utils';
export default function(source, other) {
  const options = getOptions(this)    
  // do whatever you want
  // ...
  this.callback(null, source, other)
}

です。ローダーを勉強したことがない人にとって、ローダーを手で書くのは少し難しそうに聞こえるかもしれません。実際、上で紹介した内容とアイデアをマスターした後、簡単なローダーを書き始めることができます。シンプルなコードのローダーとは何ですか?

// 首先loader它是一个node模块，这很好理解
export const lessToCss = function(source, other) {
    // source 就是你即将要转换的文件源
    // TODO
    // 将转换好的文件源流转至一个管道
    this.callback(null, source, other)
}

ローダーをもっと便利にしましょう

ローダー API には便利なものがいくつかあるので、ここで触れておきます。

this.cacheable() 実行効率向上の観点からキャッシュの使い方は非常に重要ですが、webpack の this.cacheable を使えば簡単にローダーをキャッシュできます。 () ローダーの場合 依存関係がない場合、非同期で結果を返す必要があります。

ケース分析

レスローダーのソースコードを以下に貼り付けます。コードは非常に簡潔です。上で分析したことと組み合わせると、これも非常にシンプルです。理解しやすい

import processResult from './processResult';
const render = pify(less.render.bind(less));

function lessLoader(source) {
  const loaderContext = this;
  const options = getOptions(loaderContext);
  const done = loaderContext.async();
  const isSync = typeof done !== 'function';

  if (isSync) {
    throw new Error(
      'Synchronous compilation is not supported anymore. See https://github.com/webpack-contrib/less-loader/issues/84'
    );
  }
  processResult(loaderContext, render(source, options));
}

概要

ローダーはノード モジュールです

ローダーを作成するときは、1 つの原則に従う必要があります。各ローダーは 1 種類の「エスケープ」作業のみを実行します

webpack は豊富なローダー API を提供します

webpack は一連のツール function-loader-utils

## も提供します#[関連する推奨事項:

JavaScript ビデオ チュートリアル

]

以上がWebpack はどのようにローダーを実装しますか? (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。