web-dev-qa-db-fra.com

Browserify avec Twitter bootstrap

Il y a beaucoup de questions similaires, y compris des réponses ici sur le débordement de pile, mais aucune d'entre elles n'a fonctionné pour moi, alors ici je vous pose la question. J'apprécie le temps de chacun.

J'ai récemment commencé à utiliser gulp avec browserify, et cela fonctionne très bien. J'ai ensuite essayé d'utiliser browserify pour le front-end en utilisant: Backbone et Bootstrap3.

les choses semblent fonctionner, jusqu'à ce que j'essaie d'exiger le fichier js fourni avec Bootstrap. Je reçois une erreur dans mes outils chrome indiquant: jQuery n'est pas défini.

J'ai essayé de le caler, mais je suis très confus par la cale. J'utilise jQuery 2.1.1, donc je ne devrais pas avoir besoin de shimer jQuery, mais il existe maintenant dans le shim, car j'étais désespéré et essayais de tout. Voici mon package.json et mon fichier main.js:

-------------- package.json ------------------

{
  "name": "gulp-backbone",
  "version": "0.0.0",
  "description": "Gulp Backbone Bootstrap",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Rob Luton",
  "license": "ISC",


  "devDependencies": {
    "jquery": "^2.1.1",
    "backbone": "^1.1.2",
    "browserify": "^4.2.1",
    "gulp": "^3.8.6",
    "vinyl-source-stream": "^0.1.1",
    "gulp-sass": "^0.7.2",
    "gulp-connect": "^2.0.6",
    "bootstrap-sass": "^3.2.0",
    "browserify-shim": "^3.6.0"
  },

  "browser": {
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jQuery": "./node_modules/jquery/dist/jquery.min.js"
  },

  "browserify": {
    "transform": ["browserify-shim"]
  },

  "browserify-shim": {
    "jquery": "global:jQuery", 
    "bootstrap": {
      "depends": [
        "jQuery"
      ]
    }
  }
}

------------------------- main.js ----------------------

var shim = require('browserify-shim');
$ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var bootstrap = require('bootstrap');

/* the following logs fine if I comment out the bootstrap require, otherwise I get 'jQuery undefined' */

console.log(Backbone);
$(function() {
    alert('jquery works');
});
javascripttwitter-bootstrap-3browserifybrowserify-shim
37
rob.luton

Vous ne devriez pas avoir besoin de shim jquery de cette façon si vous l'avez installé avec npm. Les œuvres suivantes pour un projet que j'ai écrit:

J'ai également appris que l'utilisation de npm pour bootstrap est une sorte de PITA. J'ai utilisé bower pour installer et maintenir certains composants frontaux lorsqu'ils doivent être calés comme ceci.

package.json:

{
  "name": "...",
  "version": "0.0.1",
  "description": "...",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "browser": {
    "d3js": "./bower_components/d3/d3.min.js",
    "select2": "./bower_components/select2/select2.min.js",
    "nvd3js": "./bower_components/nvd3/nv.d3.min.js",
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      "hbsfy"
    ]
  },
  "browserify-shim": {
    "d3js": {
      "exports": "d3",
      "depends": [
        "jquery:$"
      ]
    },
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "select2": {
      "exports": null,
      "depends": [
        "jquery:$"
      ]
    },
    "nvd3js": {
      "exports": "nv",
      "depends": [
        "jquery:$",
        "d3js:d3"
      ]
    }
  },
  "devDependencies": {
    "browserify-shim": "~3.4.1",
    "browserify": "~3.36.0",
    "coffeeify": "~0.6.0",
    "connect": "~2.14.3",
    "gulp-changed": "~0.3.0",
    "gulp-imagemin": "~0.1.5",
    "gulp-notify": "~1.2.4",
    "gulp-open": "~0.2.8",
    "gulp": "~3.6.0",
    "hbsfy": "~1.3.2",
    "vinyl-source-stream": "~0.1.1",
    "gulp-less": "~1.2.3",
    "bower": "~1.3.3",
    "cssify": "~0.5.1",
    "gulp-awspublish": "0.0.16",
    "gulp-util": "~2.2.14",
    "gulp-rename": "~1.2.0",
    "gulp-s3": "git+ssh://[email protected]/nkostelnik/gulp-s3.git",
    "gulp-clean": "~0.2.4",
    "process": "~0.7.0"
  },
  "dependencies": {
    "backbone": "~1.1.2",
    "jquery": "~2.1.0",
    "lodash": "~2.4.1",
    "d3": "~3.4.8",
    "rickshaw": "~1.4.6",
    "datejs": "~1.0.0-beta",
    "moment": "~2.7.0"
  }
}

js:

$ = jQuery = require('jquery');
var _ = require('lodash');
var Rickshaw = require('rickshaw');
var d3 = require('d3js');
var nvd3 = require('nvd3js');
var moment = require('moment');
require('datejs');
require('select2');

var bootstrap = require('bootstrap');
console.log(bootstrap)

De plus, une chose parfois utile consiste à demander à browserify-shim de produire ses diagnostics. Voici à quoi ressemble ma tâche browserify.js:

var browserify   = require('browserify');
var gulp         = require('gulp');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');
var process      = require('process');

process.env.BROWSERIFYSHIM_DIAGNOSTICS=1;

var hbsfy = require('hbsfy').configure({
  extensions: ['html']
});

gulp.task('browserify', ['images', 'less'], function(){
    return browserify({
      transform: ['hbsfy', 'cssify'],
            entries: ['./src/javascript/app.js'],
        })
        .bundle({debug: true})
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(gulp.dest('./build/'));
});
52
urban_raccoons

Il y a une erreur car j'utilise browserify qui nécessite la définition de la variable '$' ou 'jQuery'.

l'ajout de la fenêtre pour la rendre globale résout l'erreur. Je ne sais pas si ce serait la bonne façon de le faire, sinon, faites le moi savoir.

window.$ = window.jQuery = require('jquery');
var bootstrapjs = require('bootstrap-sass');
26
ken

Donc, pour que Bootstrap fonctionne avec Browserify, vous aurez besoin de l'une des transformations CSS Browserify .

D'abord l'index.js (browserify entrée) 

// Bootstrap needs jQuery on the Window
window.jQuery = $  = require('jquery');
// include popper.js if you want Bootstrap tooltips
window.Popper = require('popper.js');
// include bootstrap js libs (not the CSS libs as yet)
require('bootstrap');
// then the CSS Lib
require('bootstrap/dist/css/bootstrap.css');

Installations NPM :

npm install [email protected] jquery popper.js

Pour utiliser globalement les info-bulles :

Par le Bootstrap docs .

$('[data-toggle="popover"]').popover();

J'ai un repo Browserify-Budo ici . Si vous voulez le voir fonctionner.

1
peterb

Je me pose des questions à ce sujet depuis un moment. Cette solution simple fait le travail pour moi:

import foo from 'foo';
import bar from './bar';
import { default as $ } from "jquery";
global.$ = $;
global.jQuery = $; // This one does the trick for bootstrap!
// Boostrap's jQuery dependency only works with require, not with ES6 import!
const btp = require('bootstrap');
1
jollege