在現有應用程序上實現RequireJS

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和Require.js - 用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 ，for /profiles我有profiles.js 。 如何根據我需要/想要的頁面設法處理每個.js ？ main.js是公共文件，但Web中的每個模塊都有單獨的.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中有更多內容，但這可以幫助您入門。