[英]Browserify with twitter bootstrap
There are many similar questions including answers here on stack overflow, but none of them have worked for me, so here I am asking you guys. 有很多类似的问题,包括堆栈溢出的答案,但没有一个对我有用,所以我在这里问你们。 I appreciate everyone's time.
我感谢大家的时间。
I recently started using gulp with browserify, and that works great. 我最近开始使用浏览器gulp,这非常有效。 I then tried to use browserify for the front-end using: Backbone and Bootstrap3.
然后我尝试使用browserify作为前端使用:Backbone和Bootstrap3。
things are appearing to work, until I try to require the js file that comes with Bootstrap. 事情似乎有效,直到我尝试要求Bootstrap附带的js文件。 I get an error in my chrome tools stating: jQuery is undefined.
我的chrome工具中出现错误,说明:jQuery未定义。
I have attempted to shim it in, but I am very confused by the shim. 我试图将其填入,但我对垫片非常困惑。 I am using jQuery 2.1.1, so I should not need to shim jQuery, but it exists in the shim now, as I was desperate and trying everything.
我正在使用jQuery 2.1.1,所以我不需要shim jQuery,但它现在存在于垫片中,因为我绝望并且尝试了一切。 Here is my package.json and my main.js file:
这是我的package.json和我的main.js文件:
--------------package.json------------------ --------------的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 ---------------------- ------------------------- 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');
});
You shouldn't need to shim jquery that way if you've installed it with npm. 如果你用npm安装它,你不应该以这种方式填充jquery。 The following works for a project I've been writing:
以下是我写过的项目的作品:
I've also learned that using npm for bootstrap is kind of a PITA. 我还了解到使用npm进行bootstrap是一种PITA。 I've been using bower to install and maintain certain front-end components when they need to be shimmed like this.
我一直在使用bower来安装和维护某些前端组件,因为它们需要像这样进行填充。
package.json: 的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://git@github.com/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: 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)
Also - one sometimes useful thing is to have browserify-shim output its diagnostics. 此外 - 一个有时有用的事情是让browserify-shim输出其诊断信息。 This is what my browserify.js task looks like:
这是我的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/'));
});
There is error as I am using browserify which require the variable '$' or 'jQuery' to be defined. 因为我使用的是需要定义变量'$'或'jQuery'的browserify,所以存在错误。
adding the window to make it global resolve the error. 添加窗口以使其全局解决错误。 Not sure if this would be the correct way to do, if not, let me know.
不确定这是否是正确的方法,如果没有,请告诉我。
window.$ = window.jQuery = require('jquery');
var bootstrapjs = require('bootstrap-sass');
I've been wondering about this for a while. 我一直在想这个问题。 This simple solution does the job for me:
这个简单的解决方案对我有用:
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');
So to make Bootstrap
to work with Browserify
you're going to need one of Browserify CSS transforms . 因此,要使
Bootstrap
与Browserify
一起Browserify
您将需要一个Browserify CSS转换 。
First the index.js ( browserify
entry) 首先是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 Installs : NPM安装 :
npm install bootstrap@4.0.0-alpha.6 jquery popper.js
To use tooltips globally : 要全局使用工具提示 :
Per the Bootstrap docs . 根据Bootstrap 文档 。
$('[data-toggle="popover"]').popover();
I have a Browserify-Budo repo here . 我在这里有一个Browserify-Budo回购。 If you want to see it working.
如果你想看到它的工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.