Wie lade ich Bootstrap mit npm?

Lesezeit: 5 Minuten

Benutzer-Avatar
magerbrit51

Ich habe ein npm-Projekt, das jquery verwendet.

var $ = require('jquery');

Ich habe auch eine Index-HTML-Datei, die auf Bootstrap verweist.

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

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

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

Muss ich jetzt eine separate Ladung für jquery für Bootstrap durchführen, da es davon abhängt? Ich habe vor kurzem verwendet jqueryify Anstatt von jquery und ich brauchte die separate Last nicht.

Kann jemand ein Lademuster für Bootstrap mit der Verwendung von require empfehlen?

  • Für die Leute da draußen, die nach der richtigen Antwort suchen: stackoverflow.com/questions/26773767/…

    – Felipe Jiménez

    16. Juli 2016 um 17:37 Uhr

Benutzer-Avatar
magerbrit51

Bootstrap ist jetzt ein von den Bootstrap-Jungs unterstütztes Knotenpaket.

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

Das bedeutet, dass Sie jetzt Bootstrap im Code anfordern können. So.

npm install bootstrap --save

npm install jquery --save

foo.js

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

  • Was ist mit CSS? Müssen wir unsere SASS-Dateien in den Ordner node_modules @importieren? Scheint schmutzig.

    – Michael Giovanni Pumo

    16. Februar 2016 um 12:35 Uhr

  • @MichaelGiovanniPumo ja, das müsstest du. Ich stimme nicht zu, dass es schmutzig ist.

    – Adam Beck

    19. Februar 2016 um 4:28 Uhr

  • @MichaelGiovanniPumo Ich möchte meinen Kommentar erweitern. Musst du nicht unbedingt. Sie müssen nur sicherstellen, dass die CSS-Datei geladen wird. Könnte nur ein sein <link> -Tag in Ihrer .html-Datei. Oder Sie könnten sass/less/postcss verwenden, um die Datei zu importieren. Ich verwende Bootstrap nicht, aber in meiner Postcss-Datei kann ich anrufen @import 'normalize.css' genauso wie ich Module in Javascript benötigen würde. Für mich ist das sauber.

    – Adam Beck

    19. Februar 2016 um 4:53 Uhr

  • Beachten Sie, dass, wenn Sie die verwenden bootstrap-sass npm-Modul statt normal bootstrapdas require('bootstrap') Linie müsste sein require('bootstrap-sass').

    – Chris Schmitz

    5. Mai 2016 um 13:37 Uhr

  • Das war hilfreich, aber ich brauchte auch einen Alias ​​in meiner Laravel Mix Webpack-Konfigurationsdatei: stackoverflow.com/a/49576317/470749

    – Ryan

    30. März 2018 um 14:32 Uhr

Wenn Sie Probleme bei der Verwendung haben require('jquery'), gibt es einen einfacheren Weg, es zu tun. Leiten Sie einfach die Knotenmodulordner um (ohne irgendwelche 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

Und auf Ihre Ansichten, verwenden Sie einfach:

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

Angenommen, Sie möchten die neueste Version von installieren Bootstrap 4und die Sie verwenden node 10+ was verwendet npm mindestens 5.6+ (ich habe es für node v12.14.1 und npm 6.13.6, und es funktioniert einwandfrei):

npm install bootstrap
npm install jquery
npm install popper.js

Beachten Sie, dass Sie nicht bestehen müssen --save seit nach npm 5.0.0 installierte Module werden standardmäßig als Abhängigkeit hinzugefügt.

Angenommen, Sie haben eine Datei mit dem Namen index.html im selben Verzeichnis von node_modulesmüssen Sie Folgendes zu Ihrer hinzufügen head Schild:

<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="https://stackoverflow.com/questions/22792254/node_modules/bootstrap/dist/css/bootstrap.min.css">

Sie müssen auch Folgendes vorher hinzufügen </body>:

<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="https://stackoverflow.com/questions/22792254/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>

Beachten Sie den Kommentar: zuerst jQuery, dann Popper.js, dann Bootstrap JS. Dies ist wichtig, da Bootstrap von JQuery und Popper.js abhängt.

Sie können versuchen, es der globalen jquery-Eigenschaft zuzuweisen.

global.jQuery = require('jquery');

Benutzer-Avatar
Ozeanblau

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

  • Bitte fügen Sie eine Beschreibung mit Ihrem Code hinzu, was er tut und warum das OP ihn verwenden sollte. Dies würde verhindern, dass Ihre Antwort als minderwertig gekennzeichnet wird.

    – Muhammad Omer Aslam

    2. April 2018 um 8:48 Uhr

Benutzer-Avatar
Ben

yarn add bootstrap-sass
yarn add jquery

Für den Stil verwende ich Gulp Sass, die Pfade für Bootstrap enthalten müssen

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

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

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

Für JavaScript weise ich window.jQuery jquery zu, da Bootstrap-sass benötigt wird:

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

  • Bitte fügen Sie eine Beschreibung mit Ihrem Code hinzu, was er tut und warum das OP ihn verwenden sollte. Dies würde verhindern, dass Ihre Antwort als minderwertig gekennzeichnet wird.

    – Muhammad Omer Aslam

    2. April 2018 um 8:48 Uhr

Benutzer-Avatar
Ryan

Ich verwende Laravel Mix (Webpack), also musste ich diesen Alias ​​hinzufügen webpack.mix.js:

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

Mein package.json hat "bootstrap": "^4.0.0", innerhalb von devDependencies.

Dann verwende ich in meiner Javascript-Datei für meine Ansicht:

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

https://getbootstrap.com/docs/4.0/getting-started/download/#npm hat auch geholfen.

1228120cookie-checkWie lade ich Bootstrap mit npm?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy