coffeescript - 使用 Grunt 连接和缩小 RequireJS

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不过，也许我在那里做了一些愚蠢的事情？~~

天哪，我真是个笨蛋!

因此，在我的 HTML 中，我将连接的脚本加载为:

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

当它真的应该像这样加载时:

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

哦!