How do I load bootstrap using npm?

问题:

I have a npm project that uses jquery.

var $ = require('jquery');

I also have an index html file that references bootstrap.

<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 jqueryify instead of jquery and I did not need the separate load.

Can anyone recommend a loading pattern for bootstrap with use with require?

回答1:

Bootstrap is now a supported node package by the bootstrap guys.

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

What this means is you can now require bootstrap in code. So.

npm install bootstrap --save

npm install jquery --save

foo.js

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

回答2:

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()).

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>

回答3:

You can try assigning it to global jquery property.

global.jQuery = require('jquery');

回答4:

//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');

回答5:

yarn add bootstrap-sass
yarn add jquery

For style, I use gulp sass which need to include Paths for bootstrap

@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:

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

回答6:

I'm using Laravel Mix (Webpack), so I had to add this alias to webpack.mix.js:

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

My package.json has "bootstrap": "^4.0.0", within devDependencies.

Then in my javascript file for my view, I use:

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

https://getbootstrap.com/docs/4.0/getting-started/download/#npm also helped.