更新时间:2022-11-10 18:56:05
如果是这样的话你不需要shquery jquery你已经用npm安装了它。以下是我编写的项目的工作原理:
You shouldn't need to shim jquery that way if you've installed it with npm. The following works for a project I've been writing:
我还了解到使用npm进行bootstrap是一种PITA。我一直在使用bower来安装和维护某些前端组件,因为它们需要像这样进行填充。
I've also learned that using npm for bootstrap is kind of a PITA. I've been using bower to install and maintain certain front-end components when they need to be shimmed like this.
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 :
$ = 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)
另外 - 有时候有用的是浏览器化 - shim输出其诊断信息。这是我的browserify.js任务的样子:
Also - one sometimes useful thing is to have browserify-shim output its diagnostics. This is what my browserify.js task looks like:
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/'));
});