在Require.js模块中使用JQuery

时间:2016-12-24 21:09:45

标签: javascript jquery module requirejs amd

我想在require.js中使用jQuery,但我遇到了一些问题 我需要在module1&内部使用jQuery。 2

require.js工作正常,但无法加载jquery

这是 index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic example of requireJS integration</title>
</head>
<body>
<div id="container">
    <p>Check console and js files</p>
</div>
<script data-main="js/main" src="js/vendor/require.js"></script>
</body>
</html>

这是 main.js

// Load modules and use them

    requirejs.config({
        path: {
            'jquery': '../js/vendor/jquery-3.1.1.min',
        }
    });
require(['module1', 'module2'], function (module1, module2) {
    debugger;
    console.log(module2.testMod1() + " " + module2.testMod2());
});

这是 module1

define([], function () {
    return {
        doSomething: function () {
            return 'something';
        }
    };

});

这是 module2

define(['module1', jquery], function (module1, $) {
    return {
        testMod1: function () {
            debugger;
            console.log("jquery obj" + $);
            return module1.doSomething();
        },
        testMod2: function () {
            return "something 2"
        }

    };

});

我读过这篇但却无法让它发挥作用......我在这里做错了什么? Correct way to implement jQuery with require.js

更新 仍然像迈克尔萨克特一样改变回答,有同样的问题 这是我的项目结构

enter image description here

现在错误是:

require.js:168 Uncaught Error: Script error for "jquery", needed by: module2
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:168)
    at HTMLScriptElement.onScriptError (require.js:1735)

2 个答案:

答案 0 :(得分:1)

你有几个问题。首先,您的RequireJS配置应该在require()函数之外。

requirejs.config({
    paths: {
        'jquery': '../js/vendor/jquery-3.1.1.min',
    }
});
require(['module1', 'module2'], function (module1, module2) {
    console.log(module2.testMod1() + " " + module2.testMod2());
});

您的功能是在进行任何配置之前尝试加载module1和module2。

其次,您应该将jQuery模块重命名为全小写,这样它就不会与全局jQuery发生冲突。

define(['module1', 'jquery'], function (module1, $) {
    return {
        testMod1: function () {
            debugger;
            console.log("jquery obj" + $);
            return module1.doSomething();
        },
        testMod2: function () {
            return "something 2"
        }
    };
});

答案 1 :(得分:1)

我认为您应该将require.config中的path更改为paths