4

我们有一个大型 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

主.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 http://www.my-machine:8080/bower_components/underscore/underscore.js 404 (Not Found) 即使underscore 是我们包含的许多小部件的依赖项。

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

更新#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) {
    ...
});
4

2 回答 2

3

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

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呼叫中。

于 2014-02-11T23:13:30.267 回答
2

首先有几个考虑：

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

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

现在你应该尝试什么：

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

于 2014-02-11T10:57:18.050 回答