如何使用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中文网其他相关文章！