【问题标题】:RequireJS Optimizer - what does it actually do?RequireJS Optimizer - 它实际上做了什么?
【发布时间】:2014-06-04 12:14:19
【问题描述】:

我的印象是 RequireJS 优化器会查看已定义的依赖项并收集应用程序中所有引用的 js 文件,并将它们捆绑到一个大型 js 文件中。

然后您就可以在您的 html 脚本包含中引用该单个文件。

但情况似乎并非如此。当我运行它时,我得到一个大文件,但它包含原始 main.js 文件,该文件包含目录结构中文件的路径。

这有什么意义?如果需要的所有内容都包含在其中,为什么新的大文件包含自身之外的路径?似乎优化器会重写路径以指向“./”或其他东西。

当我捆绑整个应用程序并在页面中引用该应用程序时,我收到有关缺少包含在大型 js 文件中的文件的错误:

Uncaught object                                                     require.js:70
GET http://localhost/ui/js/modules/mod_limeLight.js 404 (Not Found) require.js:729
Uncaught Error: Script error for: mod_limelight
http://requirejs.org/docs/errors.html#scripterror 

build.js:

({
    baseUrl: "./src/ui/scripts",
    name: "main",
    mainConfigFile : "src/ui/scripts/main.js",
    out: "dist/ui/scripts/main-built.js"
})

main.js

'use strict';
require.config({
    "paths": {
        "jquery":               "libs/jquery-1.11.0.min",
        "twitter_bootstrap":    "../bower_components/bootstrap/dist/js/bootstrap.min",
        "respondjs":            "../bower_components/respond/dest/respond.min",
        "debouncejs":           "libs/dw-debounce",
        "carousel":             "libs/jquery.carouFredSel-6.2.1-packed",
        "swipe":                "libs/jquery.touchSwipe.min",

        "app":                  "app",
        "OOo_config":           'libs/oo_conf_entry-ck', // Opinion Lab pop-up

        //modules
        "addthis":              "//s7.addthis.com/js/300/addthis_widget",
        "mod_addThis":          "modules/mod_AddThis",
        "limelight":            "//assets.delvenetworks.com/player/embed",
        "mod_limelight":        "modules/mod_limeLight"
    },
    "shim": {
        "twitter_bootstrap": ["jquery"],
        "carousel": ["jquery"],
        "swipe": ["jquery"],
        "packeryjs": ["jquery"]
    }
});

require([
    "jquery",
    "app",
    "OOo_config",
    "respondjs",
    "mod_addThis",
    "mod_limelight"
], function ($, app) {

    app.init();

});

示例模块开始如下:

define([
    "jquery", "debouncejs", "limelight"
],
function ($) {
    'use strict';

    var playerElement = ...
});

然后运行:

node r.js -o build.js

我错过了什么?为什么它试图获取包含在那个大 js 文件中的文件?

谢谢, 斯科特

【问题讨论】:

    标签: javascript requirejs requirejs-optimizer


    【解决方案1】:

    它使用它们通常的路径来识别包含的模块,因为这简单明了,而且有效。当然,不会提取文件。

    【讨论】:

    • 但它们似乎已被提取,因为我的应用程序抱怨无法找到该文件。
    • @Scott:你是如何使用优化器的?
    • @Scott:您的进口产品是否符合requirejs.org/docs/optimization.html 中列出的要求?
    • 我相信是的。如果我不优化,一切都很好。所有 url 都在 main.js 中引用(添加到问题中)。
    • 认为它可能与 cdn 引用有关,我尝试使用 'empty:' 为它们添加两条路径,如下所述:requirejs.org/docs/optimization.html#empty
    猜你喜欢
    • 2014-02-05
    • 1970-01-01
    • 2013-06-02
    • 2020-11-21
    • 2015-02-26
    • 2017-06-29
    • 2013-06-13
    • 2021-10-25
    • 2011-08-12
    相关资源
    最近更新 更多