Kết hợp và rút gọn RequireJS với Grunt

Question

Tôi có một dự án được viết bằng CoffeeScript sử dụng AngularJS. dependancies nhà cung cấp của tôi được cài đặt sử dụng Bower và cấu trúc tập tin của tôi là như thế này:

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

Những gì tôi đang cố gắng làm là như sau:

1. Tôi đang cố gắng để làm việc ra làm thế nào tôi có thể sử dụng Yêu cầu r.js của RequireJS để tối ưu hóa tệp ứng dụng của tôi để về cơ bản tôi có được tệp nối tất cả được đặt hàng tốt đẹp (do đó nhà cung cấp phụ thuộc, cấu hình và tuyến đường của tôi và tệp ứng dụng của tôi).
2. Tích hợp điều này vào tệp Grunt của tôi.

Tôi đã thử sử dụng trình tối ưu hóa r.js nhưng có lẽ tôi đã quá ngớ ngẩn vì tất cả những gì có vẻ như là sao chép tệp ứng dụng của tôi (trừ các phụ thuộc của nhà cung cấp) vào thư mục dist; tuy nhiên, quản lý để tối ưu hóa các tệp coffee được tạo js.

Có ai có kinh nghiệm về điều này không?

Answer 1

I figured it out: r.js hoạt động bằng cách đọc mainConfigFile của bạn và bất kỳ module bạn tên trong cấu hình của bạn, những lưu ý quan trọng ở đây là r.js chỉ nhìn vào đầu tiên require/define trong module tên của bạn và đi ra để tìm kiếm chúng; như vậy, ví dụ, tôi đã có một tên module gọi 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] 

Vấn đề ở đây là r.js không bao giờ lừa bóng qua báo cáo kết quả đầu tiên require và do đó nối không hoạt động. Khi tôi thay đổi này để, nói (tôi app.coffee):

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

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

Và bootstrap.coffee tôi:

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] 

Điều này có nghĩa rằng tôi chỉ cần thiết để xác định angular và bootstrap trong cấu hình r.js tôi như includes và sau đó r.js sẽ làm phần còn lại, như vậy:

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

A nd bây giờ tất cả hoạt động tốt! ~~ Đó là một sự xấu hổ mà tôi phải nói với r.js bao gồm requirejs Mặc dù vậy, có lẽ tôi đã làm điều gì đó ngớ ngẩn đó? ~~

Ồ, tôi là một dingus như vậy!

Vì vậy, trong HTML của tôi Tôi đã tải kịch bản nối của tôi là:

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

Khi thực sự nó nên được nạp như thế này:

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

D'oh!

Answer 2

Từ r.js doc

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

phụ thuộc lồng nhau có thể được đóng gói trong requireJS> 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,