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

【问题标题】：How to include Jquery/Bootstrap files into the stack Webpack/angular2/typescript如何将 Jquery/Bootstrap 文件包含到堆栈 Webpack/angular2/typescript 中
【发布时间】：2016-11-25 02:32:32
【问题描述】：

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

我尝试包含 boostrap 和 jquery 的 .js 文件，但我找不到一个简单且很好解释的方法...

我尝试成功使用：

imports-loader 到 webpack.config 中
将“jquery”导入 vendor-browser.ts
require("jquery") 到我的 ts 文件中

我可能错过了什么......

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

有人可以帮我吗？

谢谢！

【问题讨论】：

你试过我的答案了吗？
不，现在没时间......

标签： javascript jquery twitter-bootstrap angular webpack

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

这是我的例子。

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

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

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

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

现在您可以通过输入 $ 在 浏览器的 控制台中进行测试它应该告诉你有 jquery 加载。

【讨论】：

【解决方案3】：

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?$' }
]

【讨论】：

如何包含bootstrap css和js？
代码块中的'window.Jquery'应该是'window.jQuery'