简体   繁体   English

如何将Jquery / Bootstrap文件包含到堆栈中Webpack / angular2 / typescript

[英]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: 我尝试成功使用:

  • imports-loader into webpack.config 导入加载程序到webpack.config
  • import "jquery" into vendor-browser.ts 导入“ jquery”到vendor-browser.ts
  • require("jquery") into my ts files require(“ jquery”)进入我的ts文件

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项目中添加jquerybootstrap.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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM