RequireJS baseUrl和多个优化文件

时间:2015-02-11 20:02:29

标签: requirejs requirejs-optimizer

我已将我的第三方库从我的应用代码中分离出来,并将它们全部分组到一个vendor.js文件中,供requirejs使用。在我的build.js文件中,我'使用modules语法优化我的主应用程序(不包括供应商脚本),并优化vendor.js文件。我遇到的唯一问题是,当我编译的main模块请求vendor时,它从配置文件中获取baseUrl,因此无法加载优化的vendor.js文件。我的build.js文件如下所示:

({
    baseUrl: "js",
    dir: "build",
    mainConfigFile: "js/main.js",
    removeCombined: true,
    findNestedDependencies: true,
    skipDirOptimize: true,
    inlineText: true,
    useStrict: true,
    wrap: true,
    keepBuildDir: false,
    optimize: "uglify2",
    modules: [
        {
            name: "vendor"
        },
        {
            name: "main",
            exclude: ["vendor"]
        }
    ]
})

我的main.js文件如下所示:

requirejs.config({
    baseUrl: "js",
    paths: {
        jquery: 'vendor/jquery/jquery-2.1.3.min',
        bootstrap: 'vendor/bootstrap/bootstrap.min',
        handlebars: 'vendor/handlebars/handlebars-v2.0.0',
        backbone: 'vendor/backbone/backbone-min',
        underscore: 'vendor/lodash/lodash.underscore',
        marionette: 'vendor/marionette/backbone.marionette.min',
        models: 'common/models',
        collections: 'common/collections'
    }
});

define(['module', 'vendor'], function(module) {
    var configPath = "config/config." + module.config().env;
    require([configPath, 'app', 'jquery'], function(config, Application, $) {
        $(function() {
            // Kick off the app
            Application.start(config);
        });
    });
});

所有开发都在js文件夹中完成,我的build.js文件位于该文件夹之外。优化后的文件最终位于build,是js的兄弟,但是当我像这样包含我的主文件时:

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

最终为js/vendor.js电话加载define()。我在这里错过了什么?如何告知优化后的main文件加载build/vendor.js,但仍允许未经优化的版本加载js/vendor.js

1 个答案:

答案 0 :(得分:1)

好的,我想出来了。这很简单,实际上只是一个配置太多的情况。使用data-main加载脚本时,baseUrl是相对于该文件设置的。因此,如果我指定js/main,则baseUrl将为js。但是,因为我在baseUrl的配置块中明确指定了main.js,所以在开发和生产中都会被覆盖。从baseUrl: "js"中移除main.js,一切都按预期工作。开发构建加载相对于js的所有内容,当我将vendor.js更改为build时,生成构建会将所有内容(data-main)相对于build/main加载。希望有一天能帮到其他人。

requirejs.config({
    paths: {
        jquery: 'vendor/jquery/jquery-2.1.3.min',
        ...
    }
});

// 'vendor' is loaded relative to whatever directory main.js is in
define(['module', 'vendor'], function(module) {
    ...
});