Как использовать ParsleyJS с Browserify

Question

Как использовать ParsleyJS с Browserify

Я пытаюсь найти модуль, содержащий jquery и parsleyjs. Пока у меня есть это:

var $ = require('jquery');
require('parsleyjs');

Если я загружу это в одиночку, следующая строка в ParsleyJS выдает ReferenceError jQuery is not defined исключение:

window.ParsleyConfig.i18n.en = jQuery.extend(window.ParsleyConfig.i18n.en || {}, {

Я думаю, что я могу использовать browserify-shim положить jQuery и ParsleyConfig в глобальную область, но я мог бы использовать некоторую помощь с деталями. Также я бы предпочел решение, которое позволяет избежать загрязнения окружающей среды.

ТИА, - Оле

2

browserify parsley.js

Источник

user1684269 13 июл '15 в 04:51

2 ответа

Другие вопросы по тегам browserify parsley.js

user4231380 04 сен '15 в 19:14 2015-09-04 19:14 · Answer 1 · 2015-09-04 19:14

Я объясню свой опыт с этой проблемой.

Это не лучший способ справиться с этим, я оставлю здесь некоторые подсказки:

Настроить

npm init
npm install --save jquery
npm install --save parsleyjs

app.js

var $ = require('jquery');
window.jQuery = $;
require('parsleyjs/src/i18n/es.js')
require('parsleyjs');
window.Parsley.setLocale('es');

var userFormValidator = require('./validators/userFormValidator.js');
var hello = require('./functions/hello.js');
//global.window.hello = hello;

if (typeof global.window.define == 'function' && global.window.define.amd) {
    global.window.define('hello', function () { return hello; });
    global.window.define('userFormValidator', function () { return userFormValidator; });
} else {
    global.window.hello = hello;
    global.window.userFormValidator = userFormValidator;
}

Функции /hello.js

module.exports = function () {
    alert('hola');
}

валидаторов /userFormValidator.js

module.exports = (function ($) {
    var _settings = {};
    var _rules = {};

    var init = function(settings) {
        _settings = {
            form : $('#usersForm'),
        };

        _rules = {
            fullname : {
                minlength : 3,
                maxlength : 80,
                required : "true",
            },
            email: {
                minlength : 3,
                maxlength : 255,
                type : "email",
                required : "true",
            },
        };
        _setup();
    };

    var _setup = function () {
        _settings.form.parsley();
        var validate = require('./validator.js');
        validate(_rules);
    };

    return {
        init: init,
    };
})(window.jQuery);

валидаторов / validator.js

var $ = require('jquery');
module.exports = function (rules) {
    $.each( rules, function( field,  constraints) {
        $.each( constraints, function( constraint,  value) {
            $('[name="' + field +'"]').attr('data-parsley-' + constraint, value);
        }.bind(field));
    })
}.bind($);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form id="usersForm">

        <label for="fullname">Full Name * :</label>
        <input type="text" name="fullname" />

        <label for="email">Email * :</label>
        <input type="text" name="email" />

        <input type="submit" />
    </form>

    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript">
        userFormValidator.init();
    </script>
</body>
</html>

user1684269 13 июл '15 в 23:22 2015-07-13 23:22 · Answer 2 · 2015-07-13 23:22

Оказывается, у проекта ParsleyJS есть тест browserify.js, который показывает, как использовать ParsleyJS с browserify. Он прикрепляет все объекты ParsleyJS к window объект, и требует, чтобы jQuery делал так же, но по крайней мере это работает. Если у кого-нибудь есть решение, которое делает это без привязки к окну, поделитесь пожалуйста.

Вот шаги, которые вы должны выполнить, чтобы это заработало:

mkdir parsleyjs-test
cd parsleyjs-test
npm init (Answer the questions)
npm install --save jquery
npm install --save parsleyjs
npm install --save-dev beefy

touch index.js

СОДЕРЖАНИЕ index.js

window.jQuery = $ = require('jquery');
require('parsleyjs');

ТЕСТ С МЯСОКОЙ:

 beefy index.js 8080

Посмотреть результаты на: http://localhost:8080/

Вы должны увидеть jQuery и Parsleyjs в глобальном пространстве имен окна. использование ctrl-shift-I чтобы открыть инструменты для веб-разработчиков в Firefox и нажмите на консоль. Наберите в командной строке окно (нижняя часть консоли Firefox), и вы увидите window.jQuery а также window.Parsley, так далее.

Ура, оле