webpack 和 jQuery：不能很好地结合在一起

Posted 2023-03-13

【中文标题】webpack 和 jQuery：不能很好地结合在一起

【英文标题】：webpack & jQuery: not playing nicely together

【发布时间】：2016-06-23 02:06:23

【问题描述】：

我正在尝试在使用 webpack 开发的 Angular 2 应用程序中使用引导程序的轮播组件。我在需要 bootsrap.js 和 jQuery.js 时遇到了真正的问题。

在 *** 和全球互联网的其他地方有很多关于这个主题的帖子。例如，This post 看起来很有希望，但我照着它做，但仍然在浏览器中收到错误：

Uncaught Error: Bootstrap's javascript requires jQuery

在我的组件的定义文件中，我有两个相当臭且看起来很可疑的要求：

require("../../../../node_modules/jquery/dist/jquery.js");
require('../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js');

我已经尝试过 bootstrap.js 的非缩小版本，以及 require 的几个变体，例如 require('jquery')，但错误仍然存​​在。

请帮忙！我已经在另一个项目上进行了这项工作，但不明白为什么 jQuery 没有发挥作用。

---

我想做的一件事是直接在组件中直接要求 jQuery 库，如下所示：

window.jquery = window.$ = require('jquery');

TypeScript 编译器抱怨，不出所料。创建包含$ 和jquery 成员的窗口界面无效。编译器仍然抱怨。

目前我会对这个解决方案感到满意，直到我找到一个不那么臭的解决方案。

非常感谢您的想法或解决方案，并通过虚拟甜甜圈获得奖励。

---

嗯。按照 basarat 的建议，我尝试了以下方法：

import $ = require('jquery');
import bootstrap = require('bootstrap-sass');

这在 VSC 和 webpack 中产生了错误：cannot find module jquery 和 cannot find module bootstrap-sass。奇怪的是，删除分配，像这样：

require('jquery');
require('bootstrap-sass');

...然后神奇地找到了模块。有一个关于嘶嘶声的不同错误，但至少它找到了模块。

想法？

【问题讨论】：

and the modules were magically found. 在compile 时间和runtime 发现的模块是不同的东西。要在 compile 找到您需要 TypeScript 定义的时间（例如 typings install --ambient jquery）。您需要自己编写bootstrap-sass 定义

这并没有解决问题，它发生在编译时。甚至在编译之前：VS Code 突出显示它。但奇怪的是，只有在您添加 import $ = 时才会发生这种情况。

【参考方案1】：

我有两个相当臭和可疑的外观要求

应该是：

import $ = require('jquery');  // 1 
import bootstrap = require('bootstrap');  // 2 

还有其他问题。我可以向您保证1 可以正常工作。问题在于 bootstrap 及其 npm 包。如果您按此顺序进行这些导入，那也应该可以正常工作。用--module commonjs编译。

【讨论】：

好吧，我正在使用 bootstrap-sass，但我会修改并试一试。谢谢。

我尝试实施您的建议并收到更多错误。请看我的原帖，我在那里添加了细节。