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" ] 
    } 
    } 
} 

НПМ установить кирки все вверх нормально, но когда я пытаюсь позвонить проверить в файле JS я просто получаю сообщение об ошибке сказав, что функция не определена. Я просмотрел около полутора десятков вопросов о стеке, но они не решили мою проблему. Я бы ожидал, что для подтверждения будет добавлен объект jquery, не уверен, что мне нужно вызвать require ('jquery-validation') в моем js-файле.

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

• Y ou не нужно прокручивать jquery, потому что он совместим с узлом.
• Чтобы shime jquery.validate вам нужно указать путь к файлу js.
• Для вашего jsquery-валидации в вашем js-коде вам понадобится.

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^(вы можете увидеть в файле package.json пакета НПМ в Jquery валидация в), так что вы должны установить зависимость от 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:

делают Shure все зависимости являются Установленная:

npm install 

построить свой файл связки:

browserify . -o ./js/bundle.js 

Теперь, если вы запустите bundle.js в браузере и посмотреть на консоли вы увидите:

jquery loaded ? true 
jquery.validate loaded? true 

---

Примечание: "depends":["jquery:jQuery"] означает, что JQuery.validation depentd на пакете «jquery» и что он истекает, чтобы найти его в глобальной переменной jQuery. Для некоторого редкого плагина jQuery вам понадобится tu put $.

Если вы не уверенны, вы можете посмотреть на коде JQuery плагин вы хотите загрузить, tipicaly:

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

потребует "depends":["jquery:jQuery"]

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

потребует "depends":["jquery:$"]