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

Posted

技术标签:

【中文标题】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 jquerycannot 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,但我会修改并试一试。谢谢。 我尝试实施您的建议并收到更多错误。请看我的原帖,我在那里添加了细节。

以上是关于webpack 和 jQuery:不能很好地结合在一起的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 在 Windows Phone 8 手机间隙应用程序中不能很好地渲染角落

jQuery-UI 的自动完成不能很好地显示,z-index 问题

Bootstrap JS 显然被 webpack 覆盖

如何将 jQuery Validate 与此 ajax 结合使用?

Webpack 从入门到上树

jQuery UI 滑块:如何使滑块处理冲突在最小值/最大值下很好地工作?