javascript - 使用 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)