gpt4 book ai didi

javascript - Browserify 与 twitter bootstrap

转载 作者:IT王子 更新时间:2023-10-29 03:11:01 25 4
gpt4 key购买 nike

有很多类似的问题,包括关于堆栈溢出的答案,但没有一个对我有用,所以我在这里问你们。我感谢大家的时间。

我最近开始将 gulp 与 browserify 结合使用,效果很好。然后我尝试使用 browserify 作为前端使用:Backbone 和 Bootstrap3。

一切似乎都正常,直到我尝试要求 Bootstrap 附带的 js 文件。我在 Chrome 工具中收到一条错误消息:jQuery 未定义。

我曾尝试将其装入,但我对垫片感到非常困惑。我正在使用 jQuery 2.1.1,所以我不需要 shim jQuery,但它现在存在于 shim 中,因为我绝望并尝试了一切。这是我的 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');
});

最佳答案

如果您已经使用 npm 安装了 jquery,则不需要以这种方式填充 jquery。以下适用于我一直在编写的项目:

我还了解到使用 npm 进行引导是一种 PITA。我一直在使用 Bower 来安装和维护某些需要像这样填充的前端组件。

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:

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

关于javascript - Browserify 与 twitter bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24827964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com