web-dev-qa-db-fra.com

Comment charger bootstrap avec npm?

J'ai un projet NPM qui utilise JQuery.

var $ = require('jquery');

J'ai aussi un fichier html d'index qui fait référence à 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>

Maintenant, ai-je besoin d'un chargement séparé pour jquery pour bootstrap, car cela dépend? J'utilisais récemment jqueryify au lieu de jquery et je n'avais pas besoin de la charge séparée.

Quelqu'un peut-il recommander un modèle de chargement pour bootstrap avec use with require?

jquerytwitter-bootstrapnpm
19
skinnybrit51

Bootstrap est maintenant un paquet de nœuds pris en charge par les utilisateurs du bootstrap.

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

Cela signifie que vous pouvez maintenant avoir besoin de bootstrap dans le code. Alors.

npm install bootstrap --save

npm install jquery --save

foo.js

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

Si vous rencontrez des difficultés pour utiliser require('jquery'), il existe un moyen plus simple de le faire. Il suffit de rediriger les dossiers des modules de nœuds (sans utiliser 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

Et sur votre point de vue, utilisez simplement:

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

Vous pouvez essayer de l'affecter à la propriété globale jquery.

global.jQuery = require('jquery');
2
Juni Brosas
//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');
1
Oceansblue

J'utilise Laravel Mix (Webpack), j'ai donc dû ajouter cet alias à webpack.mix.js:

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

Mon package.json a "bootstrap": "^4.0.0", dans devDependencies.

Ensuite, dans mon fichier javascript pour ma vue, j'utilise:

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

https://getbootstrap.com/docs/4.0/getting-started/download/#npm a également aidé.

0
Ryan
yarn add bootstrap-sass
yarn add jquery

Pour le style, j'utilise gulp sass qui doit inclure les chemins d'accès pour le bootstrap

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

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

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

Pour JavaScript, j'attribue jquery à window.jQuery selon les besoins de bootstrap-sass:

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