Gulp 和 Browserify,使用 Node.js require(); 的依赖管理。把jQuery放在最上面?
Gulp and Browserify, dependency management with Node.js require();. Put jQuery on top?
我不认为这个问题是重复的,因为 jquery 不再需要填充。我使用 npm 下载 jquery 和我正在使用的所有其他插件一样。我可能弄错了,但我认为这与另一个问题的情况不同。
Browserify gulp 任务(称为模块):
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
module.exports = function(gulp, plugins, config) {
return function() {
var b = browserify({
entries: config.srcAssets + '/js/app.js',
debug: true
});
return b.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({
loadMaps: true
}))
.on('error', gutil.log)
.pipe(plugins.sourcemaps.write('./'))
.pipe(gulp.dest(config.dest + '/js'));
};
};
我最大限度地简化了我的文件来解释我的问题。
app.js :
var form = require('./form');
form.js :
var $ = require('../../../config/node_modules/jquery');
var validator = require('../../../config/node_modules/jquery-validation');
$("#form").validate();
$(function() {
$('.printArea').height($('#form').height());
})
它不起作用,因为 jquery 验证插件将始终在 bundle.js 文件中的 jquery 之上。如果我不需要验证插件并删除依赖于它的 js(所以只留下我自己的 jquery 操作),它就可以工作。
我认为您在使用 jquery-validation
时遇到的问题是 NPM 包只是源代码;您仍然必须构建分发文件的副本才能使用它,或者从 Bower 或 CDN 中提取它。它不是可以包含在 Browserify 中的 NPM 库。您仍然需要某种转换来打包 jquery-validation
的 built 副本,以便在您的应用程序中使用。
这是解决这个问题的方法:
在 package.json 中:
"browser": {
"jquery-validate" : "./node_modules/jquery-validation/dist/jquery.validate.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery-validate" : {
"depends" : [
"jQuery"
]
}
}
在 form.js 中:
$ = jQuery = require('../../../config/node_modules/jquery');
require('../../../config/node_modules/jquery-validation/dist/jquery.validate.js');
我不认为这个问题是重复的,因为 jquery 不再需要填充。我使用 npm 下载 jquery 和我正在使用的所有其他插件一样。我可能弄错了,但我认为这与另一个问题的情况不同。
Browserify gulp 任务(称为模块):
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
module.exports = function(gulp, plugins, config) {
return function() {
var b = browserify({
entries: config.srcAssets + '/js/app.js',
debug: true
});
return b.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({
loadMaps: true
}))
.on('error', gutil.log)
.pipe(plugins.sourcemaps.write('./'))
.pipe(gulp.dest(config.dest + '/js'));
};
};
我最大限度地简化了我的文件来解释我的问题。
app.js :
var form = require('./form');
form.js :
var $ = require('../../../config/node_modules/jquery');
var validator = require('../../../config/node_modules/jquery-validation');
$("#form").validate();
$(function() {
$('.printArea').height($('#form').height());
})
它不起作用,因为 jquery 验证插件将始终在 bundle.js 文件中的 jquery 之上。如果我不需要验证插件并删除依赖于它的 js(所以只留下我自己的 jquery 操作),它就可以工作。
我认为您在使用 jquery-validation
时遇到的问题是 NPM 包只是源代码;您仍然必须构建分发文件的副本才能使用它,或者从 Bower 或 CDN 中提取它。它不是可以包含在 Browserify 中的 NPM 库。您仍然需要某种转换来打包 jquery-validation
的 built 副本,以便在您的应用程序中使用。
这是解决这个问题的方法:
在 package.json 中:
"browser": {
"jquery-validate" : "./node_modules/jquery-validation/dist/jquery.validate.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery-validate" : {
"depends" : [
"jQuery"
]
}
}
在 form.js 中:
$ = jQuery = require('../../../config/node_modules/jquery');
require('../../../config/node_modules/jquery-validation/dist/jquery.validate.js');