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

【问题标题】：How do I load bootstrap using npm?如何使用 npm 加载引导程序？
【发布时间】：2014-05-12 14:28:23
【问题描述】：

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

var $ = require('jquery');

我还有一个引用 bootstrap 的 index 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，因为它取决于它？我最近使用的是jqueryify 而不是jquery，我不需要单独加载。

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

【问题讨论】：

对于那些正在寻找正确答案的人：stackoverflow.com/questions/26773767/…

标签： jquery twitter-bootstrap npm

【解决方案1】：

Bootstrap 现在是引导人员支持的节点包。

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

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

npm install bootstrap --save

npm install jquery --save

foo.js

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

【讨论】：

CSS 怎么样？我们是否必须在我们的 SASS 文件中 @import 到 node_modules 文件夹？看起来很脏。
@MichaelGiovanniPumo 是的，你需要。我不同意它很脏。
@MichaelGiovanniPumo 我想扩展我的评论。你不一定需要。您只需要确保 CSS 文件已加载。可能只是 .html 文件中的 <link> 标记。或者您可以使用 sass/less/postcss 导入文件。我不使用引导程序，但在我的 postcss 文件中，我可以调用@import 'normalize.css'，就像我需要 javascript 中的模块一样。对我来说，这很干净。
请注意，如果您使用的是bootstrap-sass npm 模块而不是常规的bootstrap，则require('bootstrap') 行需要为require('bootstrap-sass')。
这很有帮助，但我的 Laravel Mix Webpack 配置文件中还需要一个别名：stackoverflow.com/a/49576317/470749

【解决方案2】：

如果您在使用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>

【讨论】：

【解决方案3】：

假设您要安装最新版本的Bootstrap 4，并且您正在使用node 10+，它使用npm 至少5.6+（我将它用于node v12.14.1 和npm 6.13.6，并且可以正常工作）：

npm install bootstrap
npm install jquery
npm install popper.js

请注意，您不需要传递--save，因为在npm 5.0.0 之后安装的模块默认添加为依赖项。

现在，假设您在node_modules 的同一目录下有一个名为index.html 的文件，您需要将以下内容添加到您的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。

【讨论】：

【解决方案4】：

您可以尝试将其分配给全局 jquery 属性。

global.jQuery = require('jquery');

【讨论】：

【解决方案5】：

//install expose-loader
npm install jquery --save  //Installing jquery and saving to package.Json
npm install bootstrap --save//Installing boostrap and saving to package.Json
npm install expose-loader --save-dev//Installing expose-loader and saving to package.json

// webpack
module: {
rules: [
{
     test: require.resolve('jquery'),
     loader: 'expose-loader?jQuery!expose-loader?$'
}
]}

// javascript file 
var $ = require("expose-loader?$!jquery"); 
require('bootstrap');
require('jquery.easing');

【讨论】：

请在您的代码中添加描述它在做什么以及为什么 OP 应该使用它，它会防止您的答案被标记为低质量。

【解决方案6】：

yarn add bootstrap-sass
yarn add jquery

对于风格，我使用 gulp sass 需要包含引导路径

@import "bootstrap-sprockets";
@import "bootstrap";

var sass = require('gulp-sass');

pipe(sass({includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']}).on('error', sass.logError))

对于 JavaScript，我将 jquery 分配给 window.jQuery 作为 bootstrap-sass 需要：

window.jQuery = require('jquery');
require('bootstrap-sass');

【讨论】：

【解决方案7】：

我正在使用 Laravel Mix (Webpack)，所以我必须将此别名添加到 webpack.mix.js:

mix.webpackConfig({
    ...
    resolve: {    
        ...
        alias: {        
            "bootstrap": path.resolve(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"),
        }
    },
});

我的 package.json 在 devDependencies 中有 "bootstrap": "^4.0.0",。

然后在我的 javascript 文件中，我使用：

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

https://getbootstrap.com/docs/4.0/getting-started/download/#npm 也有帮助。

【讨论】：

【解决方案8】：

将此链接添加到头部

&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/&gt;

在正文标签末尾添加这些链接

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

【讨论】：