只调用一次 require(['app'])

Question

如何调用 requireJS require(['app'], function() {});整个应用程序只在开始时执行一次，以便任何后续 require(["..."], function(...){});不需要包裹在 require(['app']?

这是我的设置：

1) 加载 require.js

<script data-main="js/app.js" src="requirejs/require.min.js"></script> 

2) 正确配置 app.js 垫片和 basUrl。

requirejs.config({ 

  baseUrl: "scripts/js",

  paths: { 
    "jquery": "../bower_components/jquery/dist/jquery.min",
    "modernizr": "../bower_components/modernizr/modernizr", 
    .
    . 
    .
  },
  shim: {
    "jquery.migrate": ['jquery'], 
    .
    .
    .
  }
}); 

3) 不同页面动态加载JS：

// Home Page
require(['app'], function() {

    require(["jquery", "foundation", "foundation.reveal"], function ($, foundation, reveal){
         $(document).foundation(); 
    }); 
});


// Catalog Page
require(['app'], function() {

    require(["jquery", "lnav/LeftNavCtrl","controllers/ProductCtrl", "controllers/TabsCtrl"], function ($, NavCtrl, ProductCtrl, TabsCtrl){
        $(function() {
            NavCtrl.initLeftNav(); 
        });
    }); 
}); 

除非我每次调用 require("...") 以加载外部 JS 或 AMD 模块时都使用 require(['app'], function()) 进行包装，否则应用程序不会初始化并且我会收到 JavaScript 错误。上面的代码有效，但效率不高。

在我尝试加载脚本之前，有没有办法启动我的 requireJS 应用程序？

我尝试在加载 require.min.js 后立即调用：

require(["app"], function (app) {
    app.run();
});

但它没有工作。

Answer 1

除了让你的第一个模块加载其余模块之外，RequireJS 中没有任何规定可以确保始终在加载任何其他模块之前加载特定模块。您要做的是在多个页面之间共享您的第一个模块，因此它无法执行加载每个页面特定内容的工作。

解决此问题的一种方法是简单地使用常规 script 元素加载 app.js：

<script src="requirejs/require.min.js"></script>    
<script src="js/app.js"></script>

那么下一个script 元素可以在不需要app.js 的情况下启动您的应用程序：

<script>
   require(["jquery", "foundation", "foundation.reveal"], function ($, foundation, reveal){
     $(document).foundation(); 
   }); 
</script>

这实际上是我决定在我正在开发的应用程序中启动我的模块的方式。诚然，由于额外的网络往返，它并没有得到优化，但就我正在开发的应用程序而言，它们仍处于非常繁重的开发中，而且我宁愿把这个优化留到以后。

请注意，一般您不想使用 script 加载 RequireJS 模块，但您的 app.js 不是真正的模块，因为它不调用 define，所以这没关系.

另一种选择是使用 Grunt、Gulp、Make 等构建工具，并为每个页面创建一个 app.js，并让每个页面加载自己的 app.js 文件。该文件将包含配置和第一个 require 调用以加载特定于您的页面的模块。