1. ホーム
  2. javascript

[解決済み] Webpack 4 ユニバーサルライブラリのターゲット

2022-03-08 16:50:58

質問

によると Webpack 4 ドキュメント を指定すると libraryTarget: 'umd' を実行すると、以下のような出力になるはずです。

(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();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

しかし、得られるのは

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define("lib", [], factory);
    else if(typeof exports === 'object')
        exports["lib"] = factory();
    else
        root["lib"] = factory();
})(window, function() {
return

より正確には、この代わりに
(typeof self !== 'undefined' ? self : this, function()
これが分かるんです。
(window, function()

これは(明らかに)ランタイムエラーを引き起こします window is undefined ノード環境でのインポート時に

はっきり言って
私が知っているのは window は、ノード・アプリケーションには存在しません。私の質問はこのことではなく、次のことについてです。 ウェブパック .

バグでしょうか、それとも何か見逃しているのでしょうか?

私の出力コンフィグ

output: {
    path: resolve(__dirname, 'umd'),
    filename: 'lib.js',
    libraryTarget: 'umd',
    library: 'lib',
    umdNamedDefine: true,
},

解決方法は?

これは バグ ウェブパック4 .
ウェブパック3 は適切なバンドルを生成します。

この問題は これ 機能が実装されるまでの間、推奨される回避策は globalObject :

output: {
    path: resolve(__dirname, 'umd'),
    filename: 'lib.js',
    libraryTarget: 'umd',
    library: 'lib',
    umdNamedDefine: true,
    globalObject: `(typeof self !== 'undefined' ? self : this)`
},