jQuery 如何使用 npm 加载引导程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22792254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I load bootstrap using npm?
提问by skinnybrit51
I have a npm project that uses jquery.
我有一个使用 jquery 的 npm 项目。
var $ = require('jquery');
var $ = require('jquery');
I also have an index html file that references 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>
Now do I need to a separate load for jquery for bootstrap as it depends on it? I was recently using jqueryifyinstead of jqueryand I did not need the separate load.
现在我是否需要单独加载 jquery 以进行引导，因为它依赖于它？我最近使用了jqueryify而不是，jquery我不需要单独的负载。
Can anyone recommend a loading pattern for bootstrap with use with require?
任何人都可以推荐一种与 require 一起使用的 bootstrap 加载模式吗？
回答by skinnybrit51
Bootstrap is now a supported node package by the bootstrap guys.
Bootstrap 现在是引导人员支持的节点包。
https://www.npmjs.org/package/bootstrap
https://www.npmjs.org/package/bootstrap
What this means is you can now require bootstrap in code. So.
这意味着您现在可以在代码中要求引导程序。所以。
npm install bootstrap --save
npm install bootstrap --save
npm install jquery --save
npm install jquery --save
foo.js
foo.js
var $ = require('jquery');
window.$ = $;
require('bootstrap');
回答by Arthur Lacoste
If you have some trouble to use require('jquery'), there is a more simple way to do it. Just redirect node modules folders (without using any require()).
如果您在使用时遇到一些麻烦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
And on your views, just use simply :
根据您的观点，只需简单地使用：
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
回答by Juni Brosas
You can try assigning it to global jquery property.
您可以尝试将其分配给全局 jquery 属性。
global.jQuery = require('jquery');
回答by lmiguelvargasf
Assuming you want to install the latest version of Bootstrap 4, and that you are using node10+ which uses npmat least 5.6+ (I used it for nodev12.14.1 and npm6.13.6, and it works properly):
假设您要安装最新版本的Bootstrap 4，并且您使用的node10+npm至少使用5.6+（我将它用于nodev12.14.1 和npm6.13.6，并且它可以正常工作）：
npm install bootstrap
npm install jquery
npm install popper.js
Notice that you don't need to pass --savesince after npm5.0.0 installed modules are added as a dependency by default.
请注意，您不需要传递，--save因为npm5.0.0 安装的模块默认添加为依赖项。
Now, assuming you have a file called index.htmlat the same directory of node_modules, you need to add the following to your headtag:
现在，假设您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">
You also need to add the following before </body>:
您还需要在之前添加以下内容</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>
Notice the comment: jQuery first, then Popper.js, then Bootstrap JS.This is important since Bootstrap depends upon JQuery and Popper.js.
注意注释：首先是 jQuery，然后是 Popper.js，然后是 Bootstrap JS。这很重要，因为 Bootstrap 依赖于 JQuery 和 Popper.js。
回答by Oceansblue
//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');
回答by Ben
yarn add bootstrap-sass
yarn add jquery
For style, I use gulp sass which need to include Paths for bootstrap
对于样式，我使用 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))
For JavaScript, I assign jquery to window.jQuery as bootstrap-sass needed:
对于 JavaScript，我将 jquery 分配给 window.jQuery 作为 bootstrap-sass 需要：
window.jQuery = require('jquery');
require('bootstrap-sass');
回答by Ryan
I'm using Laravel Mix (Webpack), so I had to add this alias to webpack.mix.js:
我正在使用 Laravel Mix (Webpack)，所以我必须将此别名添加到webpack.mix.js：
mix.webpackConfig({
...
resolve: {
...
alias: {
"bootstrap": path.resolve(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"),
}
},
});
My package.jsonhas "bootstrap": "^4.0.0",within devDependencies.
我package.json有"bootstrap": "^4.0.0",devDependencies内。
Then in my javascript file for my view, I use:
然后在我的 javascript 文件中，我使用：
var $ = require('jquery');
window.$ = $;
require('bootstrap');
https://getbootstrap.com/docs/4.0/getting-started/download/#npmalso helped.
https://getbootstrap.com/docs/4.0/getting-started/download/#npm也有帮助。
