在現有的應用程序上實現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（發展ENV點。 ..閱讀這篇文章：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的依賴關係。每次你需要文件時，它首先需要文件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([ 
    'jquery', 
    'jquery.ui', 
    'cookie' 

], function(
    $, 
    jQueryUI, 
    MyCookie 

) { 

    'use strict'; 

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

}); 

標識符名稱是對您的選擇，但我建議堅持一些約定。 require.js中有更多，但這可能會讓你開始。