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

Question

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

我尝试将boostrap&jquery，但我找不到一个简单而好解释的方法。。。

我成功地尝试使用：

• 将加载程序导入webpack.config
• 将"jquery"导入vendor-browser.ts
• require（"jquery"）到我的ts文件中

我可能错过了什么。。。

我正在寻找一个通用的解决方案，将.js文件包含到"window"对象中。文件位于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)替换每一个$occurrence。

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

此外，在使用此解决方案时，我建议还包括window.jQuery，因为有些插件只能使用这种符号。

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

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

npm install expose-loader --save-dev

然后这个：

require("expose?$!jquery");

或者在webpack-config:中

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

Answer 3

一个解决方案是这个库（用于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