requirejs优化器 - 需要帮助优化我们的应用程序

Question

我们有一个大规模的JavaScript应用程序，我们试图使用grunt-contrib-requirejs进行连接和缩小。我们使用Aura框架。我们使用bower将其他存储库中的依赖关系引入我们的主应用程序。

这里是我们应用结构

- app/ 
    | 
    |_ main.js 
    |_ index.html 
    |_ css 
    |_ bower_components/ 
     |_ core/ 
     |_ widget1/ 
      |_ main.js 
      |_ views/ 
      |_ models/ 
     |_ widget2/ 
     |_ extension1/ 
     |_ extension2/ 
     |_ other third party libraries, etc 
- Gruntfile.js 
- bower.json 

main.js：

requirejs.config({ 
    shim: { 
     ... 
    }, 
    paths: { 
     'core': 'bower_components/core/app/main', 
     'aura': 'bower_components/aura/dist/', 
     'jquery': 'bower_components/jquery/jquery', 
     'backbone': ..., 
     ... lots of other paths 
    } 
}); 
define(['core', 'jquery', 'jqueryui'], function(core, $) { 
    // Here we start Aura, which finds our extensions and widgets in 
    // bower_components 
}); 

我们目前requirejs任务配置：

requirejs: { 
    compile: { 
     options: { 
      mainConfigFile: 'app/main.js', 
      name: 'main', 
      include: ['bower_components/widget1/main', 'bower_components/widget2/main', 
       'bower_components/extension1/main', 'bower_components/extension2/main'], 
      exclude: ['jquery'], 
      insertRequire: ['main'], 
      out: 'dist/app.js' 
     } 
    } 
} 

这个连接我们的app/main及其依赖关系，但是当我们尝试运行它时，我们得到的错误如下：
GET​​404（Not Found） 尽管下划线是我们包含的许多小部件的依赖关系。

我们已经在the r.js examples中广泛尝试了不同的选项，并通读了许多试图找到答案的叠层流问题。
我们希望有关如何使用这种结构建设成为一个缩小的文件，这样的建议：

更新＃2：正确的文件结构

- dist/ 
    |_ index.html // copied using grunt copy 
    |_ css  // copied using grunt copy 
    |_ app.js  // Built with grunt requirejs 

UPDATE
我们已经在我们的垫片包括underscore其中修正了上述错误，但我们仍然收到另一个错误：

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://my-machine.com:8080/bower_components/core/app/main.js 

这包括在最小化的文件，所以我不明白为什么它无法找到该文件：

define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){ 
... 
}); 

更新＃3
的定义从上面通过优化工具生成的文件来！最初定义该模块，core/app/main.js，看起来像：

define(['aura', 'bootstrap'], function(Aura) { 
    ... 
}); 

Answer 1

几个注意事项的第一：

首先，你应该避免定义一个名字模块。名称通常由优化工具生成。请在这里阅读：http://requirejs.org/docs/api.html#modulename

其次，您应该了解baseUrl是什么以及它何时用于定位资源。虽然你没有明确地定义baseUrl，但你的情况似乎是“app /”。您还应该阅读以下内容： http://requirejs.org/docs/api.html#config-baseUrl 因此，如果使用“.js”扩展名，那么baseUrl将不会被考虑。

现在你应该尝试什么：

要下手，请从第一个参数“bower_components /核心/应用/ main.js”定义的功能。然后你应该通过自动生成的模块id来引用这个模块，这个模块id是一个相对于没有“.js”扩展名的baseUrl的路径。

Answer 2

你提到在优化文件中有这样的：

define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){ 
... 
}); 

但是，这没有任何意义。如果我重现类似的向你展示你的问题是什么，并在其上运行的优化则位于bower_components/core/app/main.js文件的结构优化为：

define("core", ... 

，因为它被称为core到应用程序的其余部分由于paths设置'core': 'bower_components/core/app/main'。

如果我在构建配置中将'bower_components/core/app/main.js'添加到include设置中，我可以重现不正确的模块名称。当我将此名称添加到include列表中时，我也会看到您提到的加载错误。确保您的include列表不包含此名称，并确保没有任何地方将'bower_components/core/app/main.js'列为依赖项。此名称不应出现在任何define或require调用中。