在现有的应用程序上实现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中有更多，但这可能会让你开始。