Knockout JS SPA + RequireJS - 捆绑路径问题答案

【问题标题】：Knockout JS SPA + RequireJS - bundle path issueKnockout JS SPA + RequireJS - 捆绑路径问题
【发布时间】：2015-08-15 16:47:41
【问题描述】：

我使用 Steve Sanderson 编写的淘汰生成器“generator-ko”生成了一个淘汰赛 JS yeoman 模板。它为单页应用程序生成现成的设置，并使用 Steve 自己的 gulp-requirejs-bundler 在包含的 gulp 文件中包含 requireJS 优化配置支持。

捆绑器插件会为您在输出文件夹的优化器配置中设置的每个捆绑包创建 .js 文件。

我遇到的问题是 requireJS 总是会尝试从 current 路径而不是 root 站点路径加载这些捆绑 JS 文件。请记住，我使用的是 SPA，因此文件夹不是“真实的”。

例如，如果您访问： www.mysite.com/event/dashboard

然后它将尝试从 www.mysite.com/event/event-dashboard.js 加载 event-dashboard.js（捆绑模块）

显然，该位置不存在作为 SPA，因此它失败了。

我需要一种方法来控制 requireJS 从哪里加载这些包，但我不知道可以在哪里配置。

看过 Steve 的 gulp-requirejs-bundler 插件后，我认为问题可能出在 requireJS 加载包的方式上。

以下是 gulp 插件提出的问题： https://github.com/SteveSanderson/gulp-requirejs-bundler/issues/4#

似乎没有很多活动在这方面进行，所以我不确定我是否会很快得到答复。

我想知道是否有人遇到过这种情况或有任何建议。

注意：我所做的唯一修改是将 hasher 换成 History.js，这样 url 就不会使用 hashbang 来控制客户端页面路由。

提前致谢。

【问题讨论】：

标签： knockout.js requirejs gulp yeoman single-page-application

【解决方案1】：

我找到了一个解决方案，但使用它并不理想： https://github.com/jrburke/requirejs/wiki/Fine-grained-URL-control

在index.html文件中，我可以重写requireJS.load()函数，将url从相对路径（即以“./”开头）修改为根路径（即“/”）

<!-- build:js /scripts.js -->
<script src="/app/require.config.js"></script>
<script src="/bower_modules/modernizr/modernizr.js"></script>
<script src="/bower_modules/requirejs/require.js"></script>
<!-- endbuild -->

<script>
 (function () {
   var load = requirejs.load;
   requirejs.load = function (context, moduleId, url) {
  //modify url here, then call original load
  return load(context, moduleId, url.replace("./", "/"));
};

//Now load code.
require(['app/startup']);
}());
</script>

请注意，我还必须从 require.js 脚本标签中删除 data-main="app/startup"。

仍然认为肯定有比这样做更好的方法。

【讨论】：