RequireJS baseUrl 和多个优化文件
RequireJS baseUrl and multiple optimized files
我已经将我的第 3 方库从我的应用程序代码中分离出来,并将它们组合到一个 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>
它最终会为 define()
调用加载 js/vendor.js
。我在这里错过了什么?我如何告诉优化的 main
文件改为加载 build/vendor.js
,同时允许未优化的版本仍然加载 js/vendor.js
?
好的,我明白了。这很简单,真的,只是配置太多的情况。当您使用 data-main
加载脚本时,baseUrl 是相对于该文件设置的。所以,如果我指定 js/main
,baseUrl
将是 js
。但是,由于我在 main.js
的配置块中明确指定了 baseUrl
,因此在开发和生产中都会被覆盖。通过从 main.js
中删除 baseUrl: "js"
,一切都按预期进行。当我将 data-main
更改为 build/main
时,开发构建加载与 js
相关的所有内容,生产构建加载与 build
相关的所有内容 (vendor.js
)。希望有一天这对其他人有所帮助。
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) {
...
});
我已经将我的第 3 方库从我的应用程序代码中分离出来,并将它们组合到一个 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>
它最终会为 define()
调用加载 js/vendor.js
。我在这里错过了什么?我如何告诉优化的 main
文件改为加载 build/vendor.js
,同时允许未优化的版本仍然加载 js/vendor.js
?
好的,我明白了。这很简单,真的,只是配置太多的情况。当您使用 data-main
加载脚本时,baseUrl 是相对于该文件设置的。所以,如果我指定 js/main
,baseUrl
将是 js
。但是,由于我在 main.js
的配置块中明确指定了 baseUrl
,因此在开发和生产中都会被覆盖。通过从 main.js
中删除 baseUrl: "js"
,一切都按预期进行。当我将 data-main
更改为 build/main
时,开发构建加载与 js
相关的所有内容,生产构建加载与 build
相关的所有内容 (vendor.js
)。希望有一天这对其他人有所帮助。
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) {
...
});