Webpackで外部モジュールを使用する方法

この記事では主にwebpack外部モジュールの具体的な使い方を紹介し、参考にしていきます。

この記事では、Webpack がライブラリをパッケージ化するときによく使用される外部オプションについて説明します。これは、いくつかの非常に一般的なモジュールを公開ライブラリにパッケージ化することを回避し、代わりに、ライブラリが上位モジュールで使用された後にそれらを外部モジュールとして宣言することを選択します。 Webpack は、最終段階で外部依存関係モジュールをパッケージ化します。

外部オプションは通常、ライブラリをパッケージ化するために使用されます。ライブラリではなく、最終的なアプリリリースの JS ファイルである場合、外部は意味がありません。 Webpack パッケージング ライブラリの分析といくつかのオプションの役割については、前の記事で説明しました。

外部オプション

ライブラリ util.js を定義するために、引き続き前の記事の例を使用します:

import $ from 'jquery'

function hideImages() {
 $('img').hide();
}

export default {
 "hideImages": hideImages
}

このライブラリをパッケージ化して公開するために Webpack を使用します:

// 入口文件
entry: {
 util: './util.js',
}

// 输出文件
output: {
 path: './dist',
 filename: '[name].dist.js'

 library: 'util',
 libraryTarget: commonjs2,
 targetExport: 'default'
}

にパッケージ化された util.dist.js ファイルこの方法では、ソースコードが jquery コードを使用しているため、jquery コードを完全に挿入します。ただし、jquery はアプリ内で非常に一般的なモジュールであるため、アプリのすべてのライブラリ モジュールがそれを使用する可能性もあります。 jquery をそのままの状態で独自のバンドルにパッケージ化し、最終的には、最終的なアプリのリリース コードに jquery のコピーが多数含まれることになりますが、これは通常の機能には影響しません。ただし、コード サイズは大きくなります。

そのため、通常、ライブラリが jquery やブートストラップなどの一般的な JS モジュールに依存する必要がある場合、それをバンドルにパッケージ化することはできませんが、Webpack 設定で外部を宣言します:

externals: {
 jquery: {
  root: 'jquery',
  commonjs: 'jquery',
  commonjs2: 'jquery',
  amd: 'jquery',
 },
},

これは Webpack に伝えています: これを注入しないでくださいモジュールをコンパイル済みの JS ファイルに追加します。ソース コード内にある import/require ステートメントはすべて保持してください。

コンパイルされたバンドル ファイルの構造を確認できます:

module.exports = (function(modules) {
 var installedModules = {};
 function webpack_require(moduleId) {
   // ...
 }
 return webpack_require('./util.js');
}) ({
 './util.js': generated_util,
 // '/path/to/jquery.js': generated_jquery 原本有这一行，现在被删去。
});

jquery モジュールがバンドル ファイルにパッケージ化されていないことがわかります。また、util の場合は、生成されたコード、つまりインポートに関連するステートメントが含まれていることがわかります。 generated_util 関数の jquery も保持されます 元の意味:

function generated_util(module, exports, webpack_require) {
 var $ = require('jquery');
 // util的其它源代码
 // ...
}

もちろん、完全に変更がないわけではありません。たとえば、ここでは CommonJS スタイルのパッケージング方法を使用しているため、インポートは従来の require キーワードに戻ります。しかし、これらは重要ではなく、キーワード require を保持し、実際に jquery を導入するために webpack_require を使用しないということです。これは、この JS ファイルの現在のモジュール管理システムに jquery が存在しないことを意味します。jquery は、この JS ファイルが他のユーザーによって参照され、その時点で上位レベルでコンパイルされた場合にのみ導入されます。ここの require キーワードは webpack_require に置き換えられます。

外部依存関係モジュールの場合、通常はこれを行うことができます。たとえば、npm を使用してライブラリを公開する場合、package.json ファイルの依存関係に jquery を追加すると、他の npm が公開したライブラリをインストールするときに jquery が実行されるようになります。また、他の人がパッケージ化して使用できるように、node_modules に自動的にダウンロードされます。

umd形式でのパッケージ化

umd形式のパッケージ化を使用すると、さまざまな環境で外部モジュールがどのように動作するかを確認できます:

(function webpackUniversalModuleDefinition(root, factory) {
 if(typeof exports === 'object' && typeof module === 'object') // commonjs2
  module.exports = factory(require('jquery'));
 else if(typeof define === 'function' && define.amd)
  define("util", ['jquery'], factory); // amd
 else if(typeof exports === 'object')
  exports["util"] = factory(require('jquery')); // commonjs
 else
  root["util"] = factory(root['jquery']); // var
}) (window, function(__webpack_external_module_jquery__) {
 return (function(modules) {
  var installedModules = {};
  function webpack_require(moduleId) {
    // ...
  }
  return webpack_require('./util.js');
 }) ({
  './util.js': generated_util,
 });
}

そして、 generated_util は、対応するパラメータも追加します __webpack_external_module_jquery__:

function generated_util(module, exports, webpack_require,
            __webpack_external_module_jquery__) {
 var $ = __webpack_external_module_jquery__;
 // util的其它源代码
 // ...
}

この書き方では、上記の CommonJS のコンパイル済みバージョンとは構造が異なりますが、実際には本質は同じです。 umd はさまざまな動作環境に対応する必要があるため、require('jquery') を進め、それをファクトリーのパラメータとして渡します。各オペレーティング環境には、それぞれ独自のアプローチがあります。

1. CommonJS: require('jquery') ステートメントを保持します。

2. AMD:defineでjqueryを依存モジュールとして定義します。

3. Var: グローバル ドメインから jquery 変数を取り出します。これには、モジュールの前に jquery をロードする必要があります。

その後、状況に関係なく、ロードされた jquery モジュールをパラメータとしてファクトリ関数に渡し、util モジュールを正しくロードできるようにします。

Webpack で生成されたコードに関する上記の部分は少し複雑になる可能性があるため、Webpack パッケージ化モジュールのメカニズムと原則をよく理解する必要があります。この部分については、この記事で詳しく説明しました。

まとめ

以上はWebpackの外部オプションの使い方とその動作をコンパイルされたJSコードから解析したものです。 Webpack に関連して生成されたコードを読むことは、依然として非常に重要だと思います。そうすることで、外部メカニズムを真に理解し、落とし穴に遭遇した場合のデバッグ方法を知ることができます。

上記は私があなたのためにまとめたものです。

関連記事:

datepicker に基づいて独自の角度時間コンポーネントを定義する例

Vue.js 2.0 が img src 属性を双方向にバインドできない場合がある問題の解決策

Vue .js による img src 割り当てメソッドを動的に

以上がWebpackで外部モジュールを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。