[英]How to include Jquery/Bootstrap files into the stack Webpack/angular2/typescript
Into my project I use the stack Webpack/angular2 (with typescript). 在我的项目中,我使用堆栈Webpack / angular2(带有打字稿)。
I try to include the .js files of boostrap & jquery but I can't find a simple and well explain way... 我尝试包括boostrap&jquery的.js文件,但是我找不到一种简单易懂的方式...
I tried succesively to use: 我尝试成功使用:
I probably miss something... 我可能会想念一些东西...
I'm looking for a generic solution to include a .js file into the "window" object. 我正在寻找一种通用解决方案,以将.js文件包含到“窗口”对象中。 Files are located into the node_modules folder.
文件位于node_modules文件夹中。
Can someone help me? 有人能帮我吗?
Thanks! 谢谢!
If i understood you then ypu want to add jquery and bootstrap.js in your angular2 project 如果我了解您,那么ypu想在您的angular2项目中添加jquery和bootstrap.js
Here is example how i did. 这是我的例子。
add a plugin so jquery can be loaded before bootstrap 添加一个插件,以便可以在引导之前加载jQuery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
and if you have installed bootstrap and jquery with npm then just import them in your main file 如果您已经使用npm安装了bootstrap和jquery,则只需将它们导入到主文件中
import "bootstrap/dist/js/bootstrap.js";
import "jquery";
now you can test in browser's console by typing $ and it should show you that there is jquery loaded. 现在您可以通过输入$在浏览器的控制台中进行测试,它应该显示已加载了jquery 。
MrJSingh answer is almost correct. MrJSingh的回答几乎是正确的。 Except that when using
ProvidePlugin
$ will not be available in browser console. 除了使用
ProvidePlugin
$时,在浏览器控制台中将不可用。 What this plugin doing is replacing every $ occurence with require(jquery)
. 该插件的作用是用
require(jquery)
替换每个$出现的事件。
So, it will not work if you are using external jquery plugins ! 因此,如果您使用的是外部jquery插件 ,它将不起作用 !
Also, when using this solution, I recommend include also window.jQuery
as some plugins only work with such notation. 另外,在使用此解决方案时,我建议还包括
window.jQuery
因为某些插件只能使用这种表示法。
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.jQuery': "jquery"
})
If you need more universal solution, consider using expose-loader
: 如果您需要更通用的解决方案,请考虑使用
expose-loader
:
npm install expose-loader --save-dev
And then this : 然后这个:
require("expose?$!jquery");
or this right in webpack config: 或在webpack配置中的此权限:
loaders: [
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]
One solution is this lib (for webpack) 一种解决方案是此lib(用于webpack)
https://github.com/shakacode/bootstrap-loader https://github.com/shakacode/bootstrap-loader
Successor to bootstrap-sass-loader.
Load Bootstrap styles and scripts in your Webpack bundle.
This loader uses SASS to process CSS styles.
Bootstrap 3 & 4 are supported.
basic example: https://github.com/shakacode/bootstrap-loader/blob/master/examples/basic 基本示例: https : //github.com/shakacode/bootstrap-loader/blob/master/examples/basic
css module example: https://github.com/shakacode/bootstrap-loader/blob/master/examples/css-modules CSS模块示例: https : //github.com/shakacode/bootstrap-loader/blob/master/examples/css-modules
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.