[解決済み] 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)`
},
関連
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】TypeError: $(...).DataTable は関数ではありません。
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]