javascript - backbone - bootstrap tooltip options

Browserify con twitter bootstrap

Question

Hay muchas preguntas similares que incluyen respuestas aquí en desbordamiento de pila, pero ninguna de ellas me ha funcionado, así que les estoy preguntando, chicos. Agradezco a todos el tiempo.

Recientemente comencé a usar gulp con browserify, y eso funciona muy bien. Luego intenté usar browserify para el front-end usando: Backbone y Bootstrap3.

las cosas parecen funcionar, hasta que intento requerir el archivo js que viene con Bootstrap. Aparece un error en mis herramientas de Chrome que dice: jQuery no está definido.

He intentado calzarlo, pero estoy muy confundido por la cuña. Estoy usando jQuery 2.1.1, así que no debería necesitar usar jQuery, pero ahora existe en el shim, ya que estaba desesperado e intentando todo. Aquí está mi package.json y mi archivo 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'');
});

Answer 1

Entonces, para que Bootstrap funcione con Browserify , necesitará una de las transformaciones de Browserify CSS .

Primero, index.js (entrada de browserify )

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

Instalaciones de NPM :

npm install [email protected] jquery popper.js

Para usar la información sobre herramientas globalmente :

Por los docs Bootstrap.

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

Tengo un repo de Browserify-Budo here . Si quieres verlo funcionando.

Answer 2

Existe un error ya que estoy usando browserify que requiere la definición de la variable ''$'' o ''jQuery''.

al agregar la ventana para que sea global, se resuelve el error. No estoy seguro si esta sería la forma correcta de hacerlo, de lo contrario, hágamelo saber.

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

Answer 3

Me he estado preguntando sobre esto por un tiempo. Esta solución simple hace el trabajo por mí:

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

Answer 4

No debería necesitar calzar jquery de esa manera si lo ha instalado con npm. Los siguientes trabajos para un proyecto que he estado escribiendo:

También aprendí que el uso de npm para bootstrap es una especie de PITA. He estado usando bower para instalar y mantener ciertos componentes frontales cuando necesitan ser ajustados de esta manera.

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)

Además, una cosa útil a veces es tener la salida de browserify de sus diagnósticos. Así es como se ve mi tarea 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/''));
});