Browserify与twitter引导

有很多类似的问题，包括堆栈溢出的答案，但没有一个为我工作，所以在这里，我问你们。 我感谢大家的时间。

我最近开始使用浏览器的gulp，这很好。 然后，我尝试使用browserify来使用前端：Backbone和Bootstrap3。

事情似乎工作，直到我试图要求与Bootstrap自带的js文件。 我在我的铬工具中出现错误，指出：jQuery是未定义的。

我试图把它冲进去，但是我很困惑。 我正在使用jQuery 2.1.1，所以我不应该需要填充jQuery，但它现在存在于垫片，因为我绝望，试图一切。 这是我的package.json和我的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

如果你已经用npm安装了，你不需要用jquery来填充。 以下为我一直在写的项目：

我也了解到，使用npm作为bootstrap是一种PITA。 我一直在使用鲍尔来安装和维护某些前端组件，当他们需要像这样的垫片。

的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://[e-mail]/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) 

另外 – 有时候有用的是让browserify-shim输出它的诊断信息。 这就是我的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/')); }); 

Answer 2

我使用browserify时出现错误，需要定义variables“$”或“jQuery”。

添加窗口使其全局解决错误。 不知道这是否是正确的做法，如果没有，让我知道。

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

Answer 3

我一直在想这件事。 这个简单的解决scheme为我做的工作：

 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

因此，要使Bootstrap与Browserify一起Browserify您需要使用Browserify CSS转换之一 。

首先index.js（ 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'); 

NPM安装 ：

 npm install bootstrap@4.0.0-alpha.6 jquery popper.js 

全局使用工具提示 ：

根据Bootstrap 文档 。

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

我有一个Browserify-Budo回购在这里 。 如果你想看到它的工作。