Gulp 和 Browserify，使用 Node.js 进行依赖管理 require();。把 jQuery 放在首位？答案

【问题标题】：Gulp and Browserify, dependency management with Node.js require();. Put jQuery on top?Gulp 和 Browserify，使用 Node.js 进行依赖管理 require();。把 jQuery 放在首位？
【发布时间】：2016-01-02 05:10:43
【问题描述】：

我不认为这个问题是重复的，因为 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());
})

它不起作用，因为在 bundle.js 文件中 jquery 验证插件将始终位于 jquery 之上。如果我不需要验证插件并删除依赖它的 js（所以只留下我自己的 jquery 操作），它可以工作。

【问题讨论】：

为什么插件会在 jQuery 之上？
我不知道，但我可以说是这样。 Browserify 把它放在 jquery 上面，所以包被破坏了！
order dependencies: jQuery is not defined with browserify的可能重复
我编辑了我的问题。我不认为这是重复的，因为我用 npm 安装了 jquery，而不是其他问题的情况。 Browserify-shim 不是这里的解决方案。（此外我还在使用 gulp，我不认为 gulp 是这里的罪魁祸首，但它仍然不同）
我认为browserify-shim 是这里的答案，至少根据我使用 RequireJS 的经验，您使用 shims 来确保加载依赖项的依赖项。问题特别在于依赖项的顺序，而垫片有助于管理该顺序。

标签： javascript jquery node.js gulp browserify

【解决方案1】：

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

【讨论】：

好的，我明白了。我错误地假设每个 npm 包都能够被浏览器化。那么您是否确认我需要使用 b-shim 等编写另一个 package.json ，特定于我自己的 js 文件？（远离 gulp/node_modules 巨大的目录）
呃，我不知道为什么一个项目会有多个 package.json，所以不，我不认为我是在这么说。
是的，问题是 npm 安装的 jquery-validation 包实际上并不是 Browserify 所期望的 CommonJS 模块。 IMO 它甚至不应该是一个 NPM 包，因为这不是可以在 Node 中运行的代码，甚至不是 Node 可以加载的 commonjs 模块。 jquery-validationjust 尝试使用全局范围内的 '$'，这不是 browserify 在加载 require() 后放置 jQuery 的位置。您也许可以使用 browserify-shim 将 jquery 公开为 window.$，但我不确定，因为我以前不必这样做。
是的，我在使用另一个插件时也遇到了这个问题。一天半之后，我设法以正确的方式使用 browserify-shim。我认为最好的办法是只使用 commonjs 模块

【解决方案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');

【讨论】：