如何在 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中文网其他相关文章!