Javascript 在现有应用程序上实现RequireJS

考虑到现有应用程序的javascript端、更好的结构、易于管理/理解以及更好地管理需要在站点不同部分运行的脚本，我决定尝试将RequireJS作为一个解决方案来实现

我还使用grunt，并利用现有模块，在一个地方管理所有内容

咕噜声

main.js

define([
    'jquery', 'jquery.ui', 'jquery.ui.touch-punch',
    'lazyload', 'swfobject', 'cookie', 'query'
    ], function (require) {

    'use strict';

    $(function () {
        alert('main.');
        // ....
    });

});

因此，我调用了build.js（development env…阅读本文：）

因此，加载

build.js

，然后也加载

main.js

，并执行

警报。到目前为止，一切都很好。。。现在的疑问来了：


我似乎不明白如何处理依赖项（从
jquery
到
cookie
和
query
）。我怎么能期望它们已经加载？因为，在我的
main.js
上，我将调用这些库，但由于它们没有加载，所以我会出现错误
假设对于
/articles
我有
articles.js
，对于
/profiles
我有
profiles.js
。我将如何根据需要/想要的页面处理每个
.js
main.js
是通用文件，但web中的每个模块都有单独的
.js
文件
我错过什么了吗
在requirejs中，您可以指定每个垫片的相关性。（）

因此，如果文件a.js在加载之前依赖于文件b.js的存在，则可以指定对文件a的依赖关系。每次需要文件a时，它首先需要文件b

例如：

requirejs.config({
baseUrl: "/",

// automatically require on page load in debug mode
deps: ['assets/scripts/main'],
//deps: ['main'],

// automatically require this for production build
// insertRequire: ['assets/scripts/main'],

paths: {
    "a"               : "assets/scripts/vendor/a",
    "b"                : "assets/scripts/vendor/b",
},
shim: {
    "a": {
        deps: ["b"]
    }
}

}).call(this);

您需要在define回调（您的入口点）中提供有效标识符作为参数。
带缩短列表的演示：

define([
    'jquery',
    'jquery.ui',
    'cookie'

], function(
    $,
    jQueryUI,
    MyCookie

) {

    'use strict';

    alert( $ ); //your local jQuery
    jQueryUI.doSomething();
    MyCookie.fooBar( 'I was required' );

});

标识符名称由您选择，但我建议您遵守一些惯例。require.js中的内容不止这些，但这可以让您开始学习。
因为您刚刚开始学习RequireJS，我想暂停一下，看看Browserify（）。它允许您像在NodeJS中一样简单地编写require语句，从而消除了一切（路径、垫片等）的猜测工作
$=require（'jquery'）
是将jquery分配给美元符号的方式，只要它是通过节点单元模块中的NPM加载的。要使用已编写的库吗<代码>模块。导出

返回的内容。它使web组件变得非常棒。自从找到RequireJS后，我就没有使用过它。@iamjpg谢谢你的建议。我将对itI进行研究，我希望其他库（如cookie库）能够自动加载，而无需我逐个调用，因为有两个库“我想要”在JS编程中不是有效参数。您可以尝试在第一次加载时将它们注册为全局变量，但这实际上取决于那些LIB本身。

<script data-main="/assets/scripts/build" src="/assets/scripts/vendor/require.js"></script>

requirejs.config({
baseUrl: "/",

// automatically require on page load in debug mode
deps: ['assets/scripts/main'],
//deps: ['main'],

// automatically require this for production build
// insertRequire: ['assets/scripts/main'],

paths: {
    "a"               : "assets/scripts/vendor/a",
    "b"                : "assets/scripts/vendor/b",
},
shim: {
    "a": {
        deps: ["b"]
    }
}

}).call(this);

define([
    'jquery',
    'jquery.ui',
    'cookie'

], function(
    $,
    jQueryUI,
    MyCookie

) {

    'use strict';

    alert( $ ); //your local jQuery
    jQueryUI.doSomething();
    MyCookie.fooBar( 'I was required' );

});