如何在 webpack 模块中加载备用 jquery？

Posted 2023-03-13

【中文标题】如何在 webpack 模块中加载备用 jquery？

【英文标题】：How do you load an alternate jquery in a webpack module?

【发布时间】：2019-01-04 10:06:22

【问题描述】：

我需要加载 jQuery 的替代版本，而不是我的 node_modules 中的版本。我有该脚本的本地副本，但无法将其加载到我的 webpack app.ts 中。我已经在我的 webpack 配置中删除了全局 jQuery 和 node_modules 的解析路径，因为我不想要来自 node_modules 的版本。但是我不知道如何将加载的 jquery 传递给需要它的脚本。

我有多个入口点 (app.ts)，每个入口点都需要能够加载不同的 jquery，因此我无法在 webpack 配置中定义 jquery，因为我想使用相同的配置来处理我的所有入口点。

app.ts

import jquery from '../../../js/jquery-3.3.1.js';

// tried this but didn't help
// window.$ = jquery;
// window.jquery = jquery;

// these two require jquery but fail, it only works if I add back in
// the webpack config to find jquery in node_modules which is what I 
// don't want. popper.js has the same issue as jquery.
import '../../../js/popper-1.12.9.min.js';
import '../../../js/bootstrap-4.0.0.js';
import './js/jquery.matchHeight-min.js';

...

【问题讨论】：

使用resolve.alias

这不会限制我使用一个 jquery 版本，因为它将在 webpack 中全局定义。配置？如果我为每个版本定义一个别名（例如jquery311），我将如何将它作为jquery 放入jquery.matchHeight-min.js？

【参考方案1】：

我认为有几种方法可以解决这个问题。

添加一些脚本。可以创建一个简单的函数，为不同的给定entry 点设置不同的resolve.alias 值。然后使用ProvidePlugin 甚至imports-loader 来进行匀场并将其设置为全局。 shimming docs 使用expose-loader。这样，您可以要求不同的脚本，但它们都将以相同的变量名公开。