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

Question

在我的项目中，我使用堆栈Webpack / angular2（带有打字稿）。

我尝试包括boostrap＆jquery的.js文件，但是我找不到一种简单易懂的方式...

我尝试成功使用：

• 导入加载程序到webpack.config
• 导入“ jquery”到vendor-browser.ts
• require（“ jquery”）进入我的ts文件

我可能会想念一些东西...

我正在寻找一种通用解决方案，以将.js文件包含到“窗口”对象中。 文件位于node_modules文件夹中。

有人能帮我吗？

谢谢！

Answer 1

如果我了解您，那么ypu想在您的angular2项目中添加jquery和bootstrap.js

这是我的例子。

添加一个插件，以便可以在引导之前加载jQuery

new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
})

如果您已经使用npm安装了bootstrap和jquery，则只需将它们导入到主文件中

import "bootstrap/dist/js/bootstrap.js";
import "jquery";

现在您可以通过输入$在浏览器的控制台中进行测试，它应该显示已加载了jquery 。

Answer 2

MrJSingh的回答几乎是正确的。 除了使用ProvidePlugin $时，在浏览器控制台中将不可用。 该插件的作用是用require(jquery)替换每个$出现的事件。

因此，如果您使用的是外部jquery插件 ，它将不起作用 ！

另外，在使用此解决方案时，我建议还包括window.jQuery因为某些插件只能使用这种表示法。

new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': "jquery"
})

如果您需要更通用的解决方案，请考虑使用expose-loader ：

npm install expose-loader --save-dev

然后这个：

require("expose?$!jquery");

或在webpack配置中的此权限：

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

Answer 3

一种解决方案是此lib（用于webpack）

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.

基本示例： https ： //github.com/shakacode/bootstrap-loader/blob/master/examples/basic

CSS模块示例： https : //github.com/shakacode/bootstrap-loader/blob/master/examples/css-modules