使用r.js爲了優化require.js文件

Question

我在寫jquery插件。由於插件包含很多代碼，我決定將代碼分成幾個文件並使用require.js。我試圖實現兩件事情：

1. 能夠運行我的測試頁使用require.js與插件的分離版本，並且由此能夠調試代碼。
2. 能夠使用require.js優化器（稱爲r.js）並從這幾個插件的文件創建一個優化（組合和縮小）的文件。

我的index.html包含：

<script data-main="js/site" src="js/vendor/require.js"></script> 

我的JS/site.js包含：

require([ 
    'jquery', 
    .... 
    .... 
    'main' //<---- main plugin file 
], function($) { 

    $(function() { 
     $('#elem').photosGrid(); 
    }); 
}); 

而且我main.js文件包含：

define([ 
    'photos-grid' //<---- Class that initialized and build the plugin 
], function(PhotosGrid) { 
    jQuery.fn.photosGrid = function(options) { 
     var photosGrid = new PhotosGrid(this, options); 
     this.data('photosGrid', photosGrid); 
     return this; 
    }; 

    return jQuery; 
}); 

在爲了配置r.js，我添加了build.js文件：

({ 
    baseUrl: '.', 
    name: "main", 
    out: "main-built.js" 
}) 

當我運行我的index.html時，我的插件效果很好。但是，當我運行node r.js，我得到以下錯誤：

Error: Mismatched anonymous define() module 

當我定義一個名字main.js：

define('module-name', ['photos-grid'], function(PhotosGrid) { ..... 

node r.js回報沒有錯誤，但沒有輸出出來。此外，index.html不會加載main.js（'photos-grid'）的依賴關係，因此網站無法運行。

我在做什麼錯？我如何正確使用r.js？

Answer 1

您忘記在優化器模式下通過-o標誌運行r.js！在official docs

更多細節（...這似乎是one of the most popular problems與r.js）