带有 browserify 的 jquery-validation NPM 模块

Question

我一直在努力让 jquery-validation 在我的项目中工作，但它似乎并没有将自己附加到我的 jquery 对象。

我的 package.json 看起来是：

{
  "name": "web01",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "2.1.3",
    "pathjs": "0.8.1",
        "jquery-validation" : "1.13.1"
  },
  "devDependencies": {
    "browserify": "8.0.2",
    "browserify-mustache": "0.0.4",
    "browserify-shim": "3.8.2",
    "phantomjs": "1.9.13",
    "mocha-phantomjs": "3.5.2",
    "mocha": "2.1.0",
    "sinon": "1.12.2",
    "proxyquireify": "1.1.0"
  },
  "browserify": {
    "transform": [
      "browserify-mustache",
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery" : "$",
    "jquery-validation": {
        "exports": "null",
        "depends": [ "jquery" ]
    }
  }
}

npm install 一切正常，但是当我尝试在 js 文件中调用 validate 时，我只是收到一个错误，提示该函数未定义。我已经查看了大约六个 stackoverflow 问题，但它们并没有解决我的问题。我本来希望 validate 已添加到 jquery 对象中，但不确定是否应该在我的 js 文件中调用 require('jquery-validation')。

var $ = require('jquery');
var ajax = require('./ajax.js');

var constraints = {
    rules: {
        email: {
            required: true,
            email: true
        },
        displayName: "required",
        password: {
            required: true,
            minlength: 6,
            pattern: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).+$"
        }
    },
    messages: {
        required: "Email not provided",
        email: "this ain't no email"
    },
    displayName: {
        required: "display name required"
    },
    password: {
        required: "password required",
        minlength: "not long enough",
        pattern: "isn't complicated enough"
    },
    submitHandler: function($form) {

        var data = extractData($form);

        ajax.send({
           type: 'POST',
           url: '/register',
           data: data,
           error: function() {
               console.log('failed to register');
           }
        });

        function extractData($form) {
            return {
                email: $form.find('#email').val(),
                displayName: $form.find('#displayName').val(),
                password: $form.find('#password').val()
            };
        }
    }
};

function registration(e) {
    e.preventDefault();

    $('#registration-form').validate(constraints);
}

module.exports = {
    selector: '#registration-form',
    registration: registration
};

有人遇到过类似的问题/对如何解决这个问题有任何想法吗？我可以使用 validate.js，但如果可能的话，我更喜欢使用 jquery 插件。

谢谢

Answer 1

我今天刚刚通过以下配置解决了这个问题：

在 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 + jquery验证

$ = jQuery = require('../../../config/node_modules/jquery');
require('../../../config/node_modules/jquery-validation/dist/jquery.validate.js');

Answer 2

• 您不需要填充 jquery，因为它与节点兼容。
• 要配置 jquery.validate，您需要提供 js 文件的路径。
• 您需要在您的 js 代码中要求 jquery-validation。

package.json

{  
   "main":"./js/main.js",
   "browser":{  
      "jquery-validation":"./node_modules/jquery-validation/dist/jquery.validate.js"
   },
   "browserify-shim":{  
      "jquery-validation":{  
         "depends":[  
            "jquery:jQuery"
         ]
      }
   },
   "browserify":{  
      "transform":[  
         "browserify-shim"
      ]
   },
   "dependencies":{  
      "jquery":"^2.0.0",
      "jquery-validation":"^1.15.1"
   },
   "devDependencies":{  
      "browserify":"^13.1.0",
      "browserify-shim":"^3.8.12"
   }
}

注意：jquery.validate 依赖于 jQuery 版本 2.0^（你可以在 jquery-validation 的 npm 包的 package.json 文件中看到）所以你必须在你的项目中设置对 jquery ^2.0 的依赖，否则 jquery-validation 会加载他自己的 jQuery 版本，集成将不起作用。

main.js

var $= require("jquery");
require("jquery-validation");

console.log("jquery loaded ?", $ instanceof Function);
console.log("jquery.validate loaded?", $().validate instanceof Function);

然后在package.json的本地文件夹中：

确保安装所有依赖项：

npm install

构建你的包文件：

browserify . -o ./js/bundle.js

现在，如果您在浏览器中运行 bundle.js 并查看控制台，您将看到：

jquery loaded ? true
jquery.validate loaded? true

---

注意："depends":["jquery:jQuery"] 的意思是 jquery.validation 依赖于包“jquery”，并且它希望在全局变量 jQuery 上找到它。对于一些稀有的 jquery 插件，您将需要使用 $ 代替。

如果你不放心，你可以看一下你想加载的 jquery 插件的代码，特别是：

function ($) {
 //Plugin code
}(jQuery);

需要"depends":["jquery:jQuery"]

function ($) {
 //Plugin code
}(windows.$);

需要"depends":["jquery:$"]