我已经开始在虚拟项目中使用 require js。我现在想使用 r.js 脚本构建我的生产项目。
上下文是这样的:
名为 start.js 的主文件是:
require([/* some stuff */], function (){ /* app logic */ });
它有一个 if,它根据某些条件决定我应该要求什么。
所需的文件是 ModuleA 或 ModuleB
ModuleA 和 ModuleB 都有依赖关系。
define([/*some deps*/], function(dep1, dep2...) { /* app logic */ return { /* interface */ }
在优化和模块连接之前,在开发模式下一切正常。
在使用 r.js 构建时,我将以下内容指定为模块目标: 模块:[{名称:“开始”},{名称:“模块A”},{名称:“模块B”}]
问题是我的 ModuleA 变成了:
define(dep1 ..);
define(dep2 ..);
define(ModuleA ..);
但是没有从 ModuleA 加载任何内容。开发中ModuleA的代码加载并执行,构建后的代码加载但不运行。
我该如何解决这个问题?
更新
http://pastebin.com/p1xUcY0A --> 开始.js
http://pastebin.com/dXa6PtpX --> ModuleA js-animation.js
http://pastebin.com/xcCvhLrT --> ModuleB css-animation.js 没有依赖。
http://pastebin.com/j51V5kMt --> 运行优化器时使用的 r.js 配置文件。
http://pastebin.com/UVkWjwe9 --> js-animation.js 在运行 r.js 后的样子。这是有问题的文件。我没有从该文件中获取 js-animation 模块。 require 不返回我的 js-animation 对象。
编辑:
去掉模块定义末尾的.js和from start js后,优化后的start.js为http://pastebin.com/LfaLkJaT js-animations 模块是 http://pastebin.com/qwnpkCC6 .在 chrome 中,我在控制台中收到此错误 http://pastebin.com/Hq7HGcmm
最佳答案
我认为您的设置存在问题,因为您在 .js
中结束了模块依赖项名称。根据文档:
RequireJS also assumes by default that all dependencies are scripts, so it does not expect to see a trailing ".js" suffix on module IDs. RequireJS will automatically add it when translating the module ID to a path.
如果 RequireJS 看到以 .js
结尾的模块名称,它会假定模块名称是相对于文档的路径。通过在 .js
中结束模块依赖项名称,它在开发模式下工作正常,因为 RequireJS 将去加载指定为依赖项的文件。在您的情况下,它将加载文件 js/js-animation.js
,查看匿名 define
并正确加载模块。
在生产中,您的start.js
模块仍然需要"js/js-animation.js"
。 RequireJS 将在路径 js/js-animation.js
加载优化模块,但现在优化器已将您的匿名模块转换为命名模块(在本例中为 "js/js-animation"
)。结果是文件将被加载,但文件中没有 define
的模块具有与 "js/js-animation.js"
匹配的名称,所以在某种意义上你缺少动画模块。
解决方案/TL;DR:从所有模块依赖项名称(以及 r.js 配置中的模块定义)中删除结尾的 .js
,您应该美好的。所以你的 start.js
应该变成(第 4 行的变化):
require([], function () {
var $html = $("html"),
animationModule = localStorage['cssanimations'] == 'true' ?
'js/css-animation' : 'js/js-animation',
$doc = $html.find("body");
console.debug("loading ", animationModule);
require([animationModule], function( animationModule ) {
animationModule.run({
target : $("div.flex")
});
} );
} );
另请注意,您可能希望在 RequireJS 配置中使用 baseUrl
和 paths
来清理模块名称(例如,这样您就可以删除 js/
前缀)。
关于javascript - 如何在生产环境中动态加载多个优化的 requirejs 模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11855422/