Gulp和Browserify，使用Node.js require（）;进行依赖管理。 将jQuery放在最前面？

Question

我不认为这个问题是重复的，因为不再需要对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操纵），则可以使用。

Answer 1

我认为您在使用jquery-validation遇到的问题是NPM包仅是源。 您仍然必须构建分布式文件的副本才能使用它，或者从Bower或CDN中提取它。 它不是Browserify可以包含的NPM库。 您仍然需要某种转换来打包构建的jquery-validation副本，以便在您的应用中使用。

Answer 2

这是解决此问题的方法：

在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');