web-dev-qa-db-fra.com

Utilisation de Bootstrap 3.0 avec Browserify

J'essaie d'utiliser Bootstrap 3.0 avec Browserify 5.9.1, mais j'obtiens l'erreur suivante:

Uncaught ReferenceError: jQuery is not defined

Quelle est la bonne façon de procéder?

Voici les parties pertinentes de mon package.json:

{
  ...
  "scripts": {
    "bundle": "browserify main.js -o bundle.js --debug --list"
  },
  "dependencies": {
    "backbone": "~1.1.x",
    "jquery": "~2.1.x",
    "underscore": "~1.6.x"
  },
  "devDependencies": {
    "browserify": "^5.9.1",
    ...
  },
  ...
}

Le module qui nécessite bootstrap est illustré ci-dessous:

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

Deux choses que je n'aime pas ici sont:

  1. Bootstrap est téléchargé à l'aide de Bower. AFAIK il n'y a aucun moyen de l'obtenir en utilisant npm. Cela rend le chemin très long et gênant. Existe-t-il un moyen de rendre Bootstrap npm amical?
  2. Bootstrap n'est pas une dépendance directe de ce module, c'est une sorte de plugin jQuery. Lorsqu'il est chargé, il crée simplement des gestionnaires d'événements sur le document pour gérer les événements des widgets de Bootstarp. Je dois exiger juste pour que ces gestionnaires d'événements soient créés. Est-ce la bonne façon?

Bien sûr, après tout cela, je reçois toujours l'erreur "jQuery is not defined". J'arrache mes cheveux en essayant de faire fonctionner ça. Aidez-moi!

P.S. Plus tôt, j'avais le plugin grunt-browserify dans l'image et j'ai rapidement réalisé qu'il utilisait la version 4.x de browserify sans capacité de carte source. Cela rendait encore plus difficile le débogage, donc je l'ai rapidement retiré de l'image et exécutant browserify directement à partir de npm.

twitter-bootstrapbrowserify
22
Naresh

Cela fonctionne pour moi lorsque j'utilise bootstrap dans browserify:

window.$ = window.jQuery = require('jquery')
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');
33
Ian Lim

J'ai rencontré le même problème: Bootstrap est disponible dans NPM mais n'est pas exposé en tant que module JS commun. L'approche sur laquelle j'ai opté était:

  1. Définir temporairement window.$ et window.jQuery
  2. Charger Bootstrap.js en l'exigeant
  3. Rétablir la valeur de window.$ et window.jQuery

J'ai placé le code ci-dessous dans un module appelé bootstrapHack.js et l'ai requis à la racine de mon application avant que quoi que ce soit d'autre s'exécute.

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

require('bootstrap');

jQuery.noConflict(true);

Ou si vous ne travaillez qu'avec un ou deux composants Bootstrap, vous pouvez les exiger individuellement et réduire la taille du fichier. Dans ce cas, il suffit de modal et d'infobulle.

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

require('bootstrap/js/tooltip');
require('bootstrap/js/modal');

jQuery.noConflict(true);
11
Joe B

Une approche plus propre serait d'utiliser le plugin atomify . Cela vous aiderait à résoudre jQuery, bootstrap.js Et bootstrap.css Tous à partir du module npm.

var gulp = require('gulp');
var atomify = require('atomify');

gulp.task('default', function () {
  atomify.css('less/main.less', 'dist/bundle.css');
  atomify.js('js/index.js', 'dist/bundle.js');
});

Vous devez @import bootstrap dans votre fichier less/css,

@import 'bootstrap';
@import './other.less';

@dark : #999;

body {
  background-color : @dark;
}

ainsi que require() bootstrap dans votre fichier js,

var $ = jQuery = require('jQuery')
require('bootstrap');
var other = require('./other')

console.log(typeof $().modal);
console.log(other());

module.exports = function() {
  console.log('Executed function xyz');
}

Un exemple complet dans this Github repo.

3
anoopelias