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 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,但我会修改并试一试。谢谢。 我尝试实施您的建议并收到更多错误。请看我的原帖,我在那里添加了细节。以上是关于webpack 和 jQuery:不能很好地结合在一起的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 在 Windows Phone 8 手机间隙应用程序中不能很好地渲染角落
jQuery-UI 的自动完成不能很好地显示,z-index 问题