web-dev-qa-db-ja.com

Webpack 4ユニバーサルライブラリターゲット

Webpack 4 documentation によると、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が存在しないことを知っています。私の質問はこれについてではなく、webpackについてです。

それはバグですか、何か不足していますか?

私の出力構成:

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

これは バグ inWebpack 4になります。
Webpack 3は適切なバンドルを生成します。

この問題は、推奨される回避策がglobalObjectを使用するまで、 this 機能で修正する必要があります。

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