如何在Webpack中有效管理jQuery插件依賴？

在 Webpack 中管理 jQuery 插件相依性

在複雜應用程式中使用 Webpack 時，管理依賴關係可能成為一項挑戰。對於依賴 jQuery 等框架的遺留插件來說尤其如此。在本文中，我們將探索將 jQuery 外掛程式無縫整合到 Webpack 專案中的不同方法。

1.設定別名為來源版本

如果為供應商模組的來源版本設定別名，webpack 可以更有效地最佳化依賴項。這允許 webpack 執行重複資料刪除等增強功能。

// webpack.config.js
module.exports = {
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

2.使用ProvidePlugin 注入隱式全域變數

遺留模組通常依賴像$ 這樣的全域變數，這對jQuery 外掛來說是不可或缺的。 ProvidePlugin 將隱式全域變數注入到您的 webpack 套件中，確保其可用性。

var webpack = require("webpack");

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

3.使用 Imports-Loader 進行配置

某些模組可能依賴 window 對象，這在 CommonJS 上下文中會出現問題。導入載入器會覆寫此約束。

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

4。使用 Imports-Loader 停用 AMD

某些模組支援多種模組樣式，包括 AMD、CommonJS 和舊版。 import-loader 可以停用 AMD 來強制使用 CommonJS 路徑。

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

5.使用腳本載入器包含全域腳本

如果全域變數不是問題，則腳本載入器提供了另一種方法來在全域上下文中導入舊腳本。

6.對大範圍使用 noParse

如果模組沒有可用的 AMD/CommonJS 版本，您可以將其標記為 noParse 以加快構建過程。但請注意，AST 增強功能將無法使用。

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

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