Question

我们有一个大型的javascript应用程序，我们正在尝试使用grunt-contrib-requirejs连接和缩小。我们使用Aura框架。我们使用bower将其他存储库的依赖关系引入我们的主应用程序。

这是我们的 app结构

- 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任务 config：

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中广泛尝试了不同的选项，并阅读了许多试图找到答案的堆栈流问题。
我们需要有关如何使用此结构将其构建为一个缩小文件的建议：

更新＃2 ：更正文件结构

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

更新
我们在垫片中添加了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

您在优化文件中提到了这一点：

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来电中。

Answer 2

首先考虑几个因素：

首先，您应该避免使用名称定义模块。该名称通常由优化工具生成。请在此处阅读：http://requirejs.org/docs/api.html#modulename

其次，您应该了解baseUrl是什么以及何时用于定位资源。尽管您没有明确定义它，但baseUrl在您的情况下似乎是“app /”。你也应该读这个： http://requirejs.org/docs/api.html#config-baseUrl 因此，如果您使用“.js”扩展名，则不会考虑baseUrl。

现在你应该尝试一下：

首先，从define函数中删除第一个参数“bower_components / core / app / main.js”。然后你应该通过自动生成的模块id来引用这个模块，它将是一个相对于baseUrl而没有“.js”扩展名的路径。

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

2 个答案: