如何使用Webpack有效管理jQuery插件依賴關係？

如何在Webpack 中管理jQuery 外掛依賴

使用webpack 時，通常會將應用程式程式碼和程式庫組織到單獨的套件中。例如，可以為所有自訂程式碼建立一個“bundle.js”，為 jQuery 和 React 等函式庫建立一個“vendors.js”。然而，當合併依賴 jQuery 並在「vendors.js」中所需的插件時，就會出現挑戰。

ProvidePlugin：全域變數注入

一種方法是利用ProvidePlugin，在遇到特定識別碼（例如「$」或「jQuery」）時注入隱式全域變數。透過配置 webpack，可以指示它在全域遇到“$”時在前面加上“var $”。

範例：

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]

imports-loader ：此綁定配置

imports-loader 允許手動變數注入。一些遺留模組假設「this」作為視窗物件存在，這可能與 CommonJS 上下文發生衝突，其中「this」等於「module.exports」。導入載入器可以覆寫此行為並將“this”綁定到視窗物件。

範例：

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

導入載入器：AMD 停用

某些模組支援多種模組樣式，包括AMD 和CommonJS。然而，他們可能會優先考慮定義和採用非常規的出口方法。這可以透過使用 import-loader 設定“define = false”來強制 CommonJS 來規避。

範例：

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

腳本載入器：全域腳本匯入

如果全域變數不是問題且只需執行遺留腳本即可為了達到目的，可以使用腳本載入器。它在全域上下文中運行模組，類似於使用 <script> 。 </script>

noParse：未解析的模組包含

當模組缺少 AMD/CommonJS 版本並且需要 dist 時，可以將其標記為「noParse」。這指示 webpack 包含該模組而不進行解析，從而縮短建置時間。但是，這會導致像 ProvidePlugin 這樣的功能無法存取。

範例：

module: {
    noParse: [
        /[\/\]node_modules[\/\]angular[\/\]angular\.js$/
    ]
}

透過利用這些方法，您可以在 webpack 配置中有效管理 jQuery 外掛依賴項。

以上是如何使用Webpack有效管理jQuery插件依賴關係？的詳細內容。更多資訊請關注PHP中文網其他相關文章！