Webpack モジュールを使用してライブラリをパッケージ化する原理と実装-jsチュートリアル-php.cn

この記事では主に webpack 組織モジュールのパッケージ化ライブラリの原理と実装について紹介し、参考にさせていただきます。

前回の記事では、JS モジュールをパッケージ化する Webpack の基本原理を分析しました。紹介されたケースは最も一般的な状況です。つまり、複数の JS モジュールとエントリーモジュールが 1 つのバンドルファイルにパッケージ化されており、ブラウザーやブラウザーで直接使用できます。他の JavaScript エンジンによる実行は、完全な実行可能ファイルを生成する直接コンパイルと同等です。ただし、別の非常に一般的な状況があります。つまり、JavaScript ライブラリを構築して公開したい場合です。たとえば、npm コミュニティで独自のライブラリを公開する場合、Webpack には対応する構成が必要となり、コンパイルされたコードは若干異なります。。

前の記事と同様に、この記事では主に Webpack の生成されたコードを分析し、それを組み合わせて、ライブラリをコンパイルする際の Webpack のライブラリ設定オプションの特定の役割を説明します。対応する公式ドキュメントはここにあります。

JS を作成するためのライブラリ

簡単なケースから始めましょう。単純なライブラリ util.js を作成します。実際には役に立たず、純粋に教育の参考のみを目的としています。。。

次に、Webpack の設定を書きます:

import $ from &#39;jquery&#39;

function sayHello() {
 console.log("Hello");
}

function hideImages() {
 $(&#39;img&#39;).hide();
}

export default {
 sayHello: sayHello,
 hideImages: hideImages
}

ログイン後にコピー

ただし、これだけでは不十分です。出力ファイルはすぐに実行される関数であり、最後に util.js のエクスポートが返されます。前回の記事で分析した結果、最終的に生成されたバンドルのコード構造はおおよそ次のようになります:

// 入口文件
entry: {
 util: &#39;./util.js&#39;,
}

// 输出文件
output: {
 path: &#39;./dist&#39;,
 filename: &#39;[name].dist.js&#39;
}

ログイン後にコピー

実行されれば終了です。util.js のエクスポート部分を返すだけです。必要なのは以下のことです。この戻り値をコンパイル済みファイルの module.export に渡すと、コンパイル済みファイルは他の人がインポートできるライブラリになります。したがって、取得したいコンパイル済みファイルは次のようになります:

(function(modules) {
 var installedModules = {};
 
 function webpack_require(moduleId) {
   // ...
 }

 return webpack_require(&#39;./util.js&#39;);
}) ({
 &#39;./util.js&#39;: generated_util,
 &#39;/path/to/jquery.js&#39;: generated_jquery
});

ログイン後にコピー

このような結果を得るには、Webpack 設定の出力部分にライブラリ情報を追加する必要があります:

module.exports = (function(modules) {
 var installedModules = {};
 function webpack_require(moduleId) {
   // ...
 }
 return webpack_require(&#39;./util.js&#39;);
}) ({
 &#39;./util.js&#39;: generated_util,
 &#39;/path/to/jquery.js&#39;: generated_jquery
});

ログイン後にコピー

ここで最も重要なことは libraryTarget です。現在 commonjs2 形式を使用すると、上記のコンパイル結果が得られます。これは、Webpack ライブラリが最終出力を CommonJS 形式でエクスポートすることを意味し、これによりライブラリのリリースが実現します。

その他の公開形式

commonjs2 に加えて、libraryTarget には他のオプションもあります:

// 入口文件
output: {
 path: &#39;./dist&#39;,
 filename: &#39;[name].dist.js&#39;,

 library: &#39;util&#39;,
 libraryTarget: commonjs2
}

ログイン後にコピー

さまざまなオプションを使用すると、コンパイルされたファイルをさまざまな JavaScript 実行環境で使用できます。ここでは、Tiger Balm umd 形式の出力がどのようになるかを直接確認します。

var (默认值，发布为全局变量)
commonjs
commonjs2
amd
umd

ログイン後にコピー

は、さまざまな異なるケースを処理する必要があるため、前の commonjs2 の状況よりもはるかに複雑ですが、実際には次の部分も同様です。最も重要なのは最初の数行で、これは umd モジュールを記述する標準的な方法です。渡されたファクトリ関数 (実際にはモジュールをロードする関数) を実行し、返された結果をさまざまな動作環境に応じて対応するオブジェクトに渡します。たとえば、var は結果をグローバル変数として設定します。これは、ブラウザが

著者別の最新記事