Question

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

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

我成功地尝试使用：

imports-loader into webpack.config
import＆＃34; jquery＆＃34;进入vendor-browser.ts
要求（＆＃34; jquery＆＃34;）进入我的ts文件

我可能会错过一些东西......

我正在寻找一个通用的解决方案，将.js文件包含在＆＃34;窗口中＃34;宾语。文件位于node_modules文件夹中。

有人可以帮助我吗？

谢谢！

Answer 1

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

以下是我的例子。

添加插件，以便在bootstrap

之前加载 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

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

3 个答案: