Naviguer avec Twitter bootstrap
Il y a beaucoup de questions similaires, y compris des réponses ici sur le débordement de la pile, mais aucune d'entre elles n'ont fonctionné pour moi, alors je vous demande les gars. J'apprécie le temps de tous.
J'ai récemment commencé à utiliser gulp avec browserify, et cela fonctionne très bien. J'ai ensuite essayé d'utiliser le navigateur 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 en indiquant: jQuery est indéfini.
J'ai tenté de le limiter, mais je suis très confus par la cale. J'utilise jQuery 2.1.1, donc je n'aurais pas besoin de limiter jQuery, mais il existe maintenant, car j'étais désespéré et j'essayais tout. Voici mon package.json et mon fichier main.js:
- Requête n'est pas une erreur définie avec browserify
- Comment obtenir une sortie minifiée avec browserify?
- Compilation de modules dynamiquement requis avec Browserify
- Erreur de navigateur / usr / bin / env: nœud: aucun fichier ou répertoire
————– 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'); });
Vous ne devriez pas avoir besoin de jquer jquery de cette façon si vous l'avez installé avec npm. Les travaux suivants 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 avant quand ils doivent être remplacé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)
Aussi – une chose parfois utile est d'avoir navigateur-shim output son diagnostic. Voici ma tâche de 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/')); });
Il y a une erreur alors que j'utilise un navigateur qui exige que la variable '$' ou 'jQuery' soit définie.
En ajoutant la fenêtre pour la rendre globale, résolvez l'erreur. Je ne sais pas si ce serait le bon moyen de faire, sinon, laissez-moi savoir.
window.$ = window.jQuery = require('jquery'); var bootstrapjs = require('bootstrap-sass');
Je me demandais 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');