Question

我试图浏览一个包含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放在全局范围内，但我可以对细节使用一些帮助。此外，我更倾向于避免污染全球范围的解决方案。

TIA， - Ole

Answer 1

证明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中打开Web开发人员工具，然后单击控制台。在命令行中键入窗口（firefox控制台的底部），您将看到window.jQuery和window.Parsley等。

干杯， Ole

Answer 2

我将解释自己对这个问题的经验。

这不是管理此问题的最佳方式，我将在这里留下一些线索：

设置

Set-Location $MyInvocation.PSScriptRoot

app.js

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

功能/ hello.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;
}

验证器/ userFormValidator.js

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

验证器/ validator.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);

的index.html

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($);

如何在Browserify中使用ParsleyJS

2 个答案: