使用 r.js 来优化 require.js 文件

Posted 2023-02-24

【中文标题】使用 r.js 来优化 require.js 文件

【英文标题】：use r.js in order to optimize require.js files

【发布时间】：2013-03-21 05:28:36

【问题描述】：

我正在编写 jquery 插件。由于插件包含大量代码，我决定将代码分成几个文件并使用 require.js。我正在努力实现两件事：

能够使用 require.js 和插件的分离版本运行我的测试页面，并由此能够调试代码。 能够使用 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？

【问题讨论】：

您确定您通过了-o 标志吗？ （根据requirejs.org/docs/optimization.html#basics）你没有提到它，所以谁知道呢？

@kryger：你说得对！谢谢！请为此创建一个答案。

【参考方案1】：

您忘记传递-o 标志以在优化器模式下运行r.js！更多详情在official docs

（...这似乎是one of the most popular problems 和r.js）