Question

我有一个使用AngularJS编写的CoffeeScript项目。我的供应商依赖项是使用Bower安装的，我的文件结构如下：

- assets
 - js
  - app
   - model
    - *.coffee
   - factory
    - *.coffee
   ...
   - app.coffee
   - config.coffee
   - routes.cofeee
  - vendor
   - angular
   - lodash
   ...
  - dist

我要做的是以下内容：

我正在尝试弄清楚如何使用RequireJS的r.js来优化我的应用程序文件，这样我基本上可以得到一个所有顺序好的连接文件（所以供应商依赖，我的配置和路由，以及他们我的应用程序文件）。
将其整合到我的Grunt文件中。

我尝试过使用r.js优化工具，但也许我太傻了，因为它似乎只是将我的应用程序文件（减去供应商的依赖项）复制到dist文件夹中;但是，它会设法优化coffee生成的js文件。

有没有人有这方面的经验？

Answer 1

我明白了：r.js通过阅读您的mainConfigFile以及您在配置中命名的所有模块来工作，这里重要的注意事项是r.js仅查看第一个require在你命名的模块中找到/ define然后去找它们;所以，例如，我有一个名为app的命名模块：

require ['config'], (cfg) ->
  require ['angular'], (A) ->
    A.module cfg.ngApp, []

    require ['routes'], () ->
      require [
        'factory/a-factory',

        'service/a-service',

        'controller/a-controller'
      ], () ->
        A.bootstrap document, [cfg.ngApp]

这里的问题是r.js从未超过第一个require语句，因此连接不起作用。当我改变它时，说（我的app.coffee）：

require ['config'], (cfg) ->
  require ['angular'], (A) ->
    A.module cfg.ngApp, []

    require ['bootstrap'], (bootstrap) ->
      bootstrap()

我的bootstrap.coffee：

define [
  'config',
  'angular',
  'routes',

  'factory/a-factory',

  'service/a-service',

  'controller/a-controller'
], (cfg, A, routes) ->
  class Bootstrap
    constructor: () ->
      routes()

      A.bootstrap document, [cfg.ngApp]

这意味着我只需要在我的angular配置中将bootstrap和r.js定义为includes，然后r.js将完成余下的工作，就像这样：

baseUrl: 'assets/js/app',
mainConfigFile: 'assets/js/app/config.js',
name: 'app',
include: [
  '../vendor/requirejs/require',
  'bootstrap'
],
out: 'assets/js/dist/app.js'

现在一切正常！ ~~遗憾的是，我必须告诉r.js包括requirejs，也许我在那里做了些傻事？~~

Blimey，我是个dingus！

所以在我的HTML中，我将我的连接脚本加载为：

<script src="assets/js/dist/app.js"></script>

当

<script src="assets/js/vendor/requirejs/require.js" data-main="assets/js/dist/app"></script>

D'哦！

Answer 2

来自r.js doc

https://github.com/jrburke/r.js/blob/master/build/example.build.js#L322

嵌套依赖项可以捆绑在requireJS＆gt;中。 V1.0.3

//Finds require() dependencies inside a require() or define call. By default
//this value is false, because those resources should be considered dynamic/runtime
//calls. However, for some optimization scenarios, it is desirable to
//include them in the build.
//Introduced in 1.0.3. Previous versions incorrectly found the nested calls
//by default.
findNestedDependencies: false,

用Grunt连接和缩小RequireJS

2 个答案: