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 的 built 副本，以便在您的应用程序中使用。

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

Gulp 和 Browserify，使用 Node.js require(); 的依赖管理。把jQuery放在最上面？

Gulp and Browserify, dependency management with Node.js require();. Put jQuery on top?

javascript

jquery

node.js

gulp

browserify