如何使用npm加载引导程序？

Question

我有一个使用jquery的npm项目.

var $ = require('jquery');

我还有一个引用bootstrap的索引html文件.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script type="text/javascript" src="my-script.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

现在我需要单独加载jquery for bootstrap,因为它取决于它吗？我最近使用jqueryify而不是,jquery我不需要单独的负载.

任何人都可以推荐一个加载模式的bootstrap与require一起使用吗？

Answer 1

Bootstrap现在是引导程序员支持的节点包.

https://www.npmjs.org/package/bootstrap

这意味着您现在可以在代码中需要引导程序.所以.

npm install bootstrap --save

npm install jquery --save

foo.js

var $ = require('jquery');
window.$ = $;
require('bootstrap');

Answer 2

假设您要安装最新版本的Bootstrap 4，并且您使用的node10+npm至少使用了 5.6+（我将它用于nodev12.14.1 和npm6.13.6，并且可以正常工作）：

npm install bootstrap
npm install jquery
npm install popper.js

请注意，您不需要传递，--save因为npm5.0.0 安装的模块默认添加为依赖项。

现在，假设您index.html在 的同一目录中调用了一个文件node_modules，您需要将以下内容添加到您的head标签中：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

您还需要在之前添加以下内容</body>：

<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

注意注释：首先是 jQuery，然后是 Popper.js，然后是 Bootstrap JS。这很重要，因为 Bootstrap 依赖于 JQuery 和 Popper.js。

Answer 3

如果您使用起来有问题,可以采用require('jquery')更简单的方法.只需重定向节点模块文件夹(不使用任何require()).

app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

在您的观点上,只需使用:

<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>