使用 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）