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

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 及其依赖项，但是当我们尝试运行它时，我们会收到如下错误:
获取 http://www.my-machine:8080/bower_components/underscore/underscore.js 404(未找到)尽管下划线是我们包含的许多小部件的依赖项。

我们在 the r.js examples 中广泛尝试了不同的选项，并通读许多 stackover 流程​​问题，试图找到答案。
我们需要有关如何将其构建为具有以下结构的缩小文件的建议:

更新#2:正确的文件结构

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

更新
我们在修复上述错误的 shim 中包含了 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
上面的define来自优化工具生成的文件!该模块的原始定义 core/app/main.js 看起来像:

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

Answer 1

你提到在你的优化文件中有这个:

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

但这没有意义。如果我重现类似于您在问题中显示的结构并对其进行优化，则位于 bower_components/core/app/main.js 的文件将优化为:

define("core", ...

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

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