Question

由于具有现有应用程序的javascript端，更好的结构化，易于管理/理解以及更好地管理需要为站点的不同部分运行的脚本，我决定尝试将RequireJS作为解决方案

我也使用grunt，并利用grunt-contrib-requirejs现有模块，在一个地方管理所有模块。

咕噜

requirejs: {
    options: {
        baseUrl: "./",
        mainConfigFile: "<%= project.scripts %>/build.js",
        name: "<%= project.bowerDir %>/almond/almond",
        out: "<%= project.scripts %>/main.min.js"
    },

    debug: {
        options: {
            optimize: 'none'
        }
    },

    production: {
        options: {
            optimize: 'uglify2'
        }
    }
},

build.js

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: {
        "bower" : "../../../bower_components",
        "module": "../modules",

        "jquery"               : "bower_components/jquery/dist/jquery",
        "jquery.ui"            : "assets/scripts/vendor/jquery-ui-1.10.3.custom.min",
        "jquery.ui.touch-punch": "assets/scripts/vendor/jquery.ui.touch-punch.min",
        "lazyload"             : "bower_components/jquery.lazyload/jquery.lazyload",

        "swfobject"            : "assets/scripts/vendor/swfobject",
        "cookie"               : "assets/scripts/vendor/jquery.cookie",
        "query"                : "assets/scripts/vendor/jquery.query",
    }
}).call(this);

// Load the main app module to start the app
// requirejs(["app", "module/home"]);

main.js

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

    'use strict';

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

});

所以，我到了调用build.js的位置（开发环境......阅读这篇文章：Grunt.js and Require.js - compiling with r.js）...

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

因此，build.js已加载，然后main.js也会加载，alert也会执行。到目前为止，这么好......现在出现了疑问：

我似乎无法理解如何使用依赖项（从jquery到cookie和query）。我怎么能指望他们已经装好了？因为，在我的main.js我将调用这些库，但由于它们未被加载而导致错误。
我要/articles我articles.js，/profiles我profiles.js。如何根据我需要/想要的页面设法处理每个.js？ main.js是公共文件，但网络中的每个模块都有单独的.js个文件。
我错过了什么吗？

Answer 1

在requirejs中，您可以为每个垫片指定依赖项。（http://requirejs.org/docs/api.html#config-shim）

因此，如果文件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);

Answer 2

您需要在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

2 个答案: