【webpackを深く理解する】library,libraryTarget,externalsの違いと役割

フロントエンドフレームワークの急速な発展を経て、モジュール化に慣れ始めたが、script導入とrequire(import)導入の違いは分からない.どのように導入するかは、以前にどのようにエクスポートするかによって異なり、検証コードの古いプロジェクトを再構築する際に、scriptで導入できるように内部メソッドを使用する方法がわかりません.
シナリオは次のように簡略化されます.

プラグインコード

import {util} from 'util'
import styles from 'css'
export function initA(){
    console.log('it is init')
    ...
}

は、一般的なwebpackによってbundleにパッケージする.js,htmlに

を導入

<script src="bundle.js">script>
<script>
//         initA  ，  initA undefined
initA()
script>

原因を分析する
ページエラーinitA undefined、明らかにこの時initAを呼び出して、windowオブジェクトの上でinitAの方法を探すことを代表して、モジュール化の開発のため、すべてのグローバル変数を根絶して、だからグローバルでこのオブジェクトを見つけることができなくて、それはローカル変数で、パッケージ化した後にコードは以下のように簡略化します:

(function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.initA = initA;
function initA() {
    console.log('it is initA');
}
})

では、変数をエクスポートしてグローバルオブジェクトの下にマウントするには、一般的なjqueryがどのように動作しているかを見てみましょう.

//jQuery 1.2.6(         )
var _jQuery = window.jQuery,
        _$ = window.$;
    var jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    };

複数の検索を経てwebpack構成でoutput.libraryTargetパラメータは、出力モジュール仕様を構成できます.
Webpack libraryTargetパラメータの説明
公式サイトの説明でlibraryTargetには、次のパラメータがあります(output.libraryを指定しないとこの「var」構成がキャンセルされます)中国語の説明

libraryTarget: “var”(default) output.libraryは値を変数宣言としてエクスポートします(scriptラベルを使用する場合、実行後にグローバル役割ドメインで使用できます).

libraryTarget:「window」libraryロードが完了すると、エントリの開始点の戻り値がwindowオブジェクトに割り当てられます.

window["MyLibrary"] = _entry_return_;
//             library：
window.MyLibrary.doSomething();

libraryTarget: “assign”

libraryTarget: “this”

libraryTarget: “global”

libraryTarget:「commonjs」libraryロードが完了すると、エントリの開始点の戻り値がexportsオブジェクトに割り当てられます.この名称はまた、モジュールがCommonJS環境

に使用されることを意味する.

exports["MyLibrary"] = _entry_return_;
//             library：
require("MyLibrary").doSomething();

libraryTarget: “commonjs2”

libraryTarget: “amd”

libraryTarget:“umd”これはあなたのlibraryがすべてのモジュール定義の下で実行できる方法です(そしてエクスポートされたのは完全にモジュールではありません).CommonJS、AMD環境で実行するか、モジュールをglobalの変数の最終出力にエクスポートします:

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports["MyLibrary"] = factory();
  else
    root["MyLibrary"] = factory();
})(this, function() {
  //            chunk     
});

libraryTarget: “jsonp”

var,window,global,umdの違いを比較する
ブラウザ環境とnode環境の違いによりwindow(カスタマーサービス側ブラウザ)とglobal(nodeサービス側)の違いが生じる.私が理解しているvarはscriptインポート時にwindowと一致し、importでインポートできるかどうか、インポート後の使用はまだ説明されていません.umdは、すべての状況のカスタマイズをサポートします.総じてlibraryを設定すると、現在の環境のグローバルにライブラリファイルが導入されます.
externalsの簡単な使用
ではexternalsはどのように使用されていますか?モジュールエクスポートとの違いは何ですか?定義を参照してください:externals構成オプションは、「出力されたbundleから依存を排除する」方法を提供します.すなわち,webpackパッケージではライブラリをbundleに打ち込むことはないので,開発者がhtmlにscriptタグを介して導入する必要がある.たとえば、CDNからjQueryを導入し、パッケージ化するのではなく、次のようにします.
index.html

<script src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

気のある学生は考えているかもしれませんが、私はscriptラベルから導入しました.では、グローバルで使用できます.なぜこの構成を設定するのでしょうか.元の依存モジュールを変更しないために!次のように

import $ from 'jquery';

$('.my-element').animate(...);

外部依存性(external dependency)を有するbundleは、CommonJS、AMD、グローバル変数、ES 2015モジュールなどの様々なモジュールコンテキストで使用することができる.ここでいうパターンは,前述のlibraryTargetのパターンである.外部libraryは、次のいずれかの形式で使用できます.

root-外部libraryは、グローバル変数として使用できます.ユーザーはscriptラベルに導入することで実現できます.これはexternalsのデフォルト設定です.

commonjs-ユーザー(consumer)アプリケーションはCommonJSモジュールシステムを使用する可能性があるため、外部libraryはCommonJSモジュールシステムを使用し、CommonJSモジュールであるべきである.

commonjs 2-上記の行と似ていますがmoduleが導出されています.exports.default.

amd-上記の行と同様ですが、AMDモジュールシステムを使用します.