require.js文本插件将".js"添加到文件名中

Question

我正在尝试使用requirejs和文本插件,我有一些奇怪的问题.

我有两个Web服务器:

1. localhost:3000 - 充当CDN并具有所有静态文件:js,images,css和templates
2. localhost:3001 - server - 充当REST服务器,只提供一个文件,即main.html文件

main.html文件使用以下行从第二个服务器加载所有js文件:

<script data-main="http://localhost:3000/js/main" 
        src="http://localhost:3000/lib/require-jquery.js"></script>

出于某种原因,当使用requirejs文本插件时,他".js"在导航到localhost时添加到模板后缀:3001

我使用以下语法:

define ['jquery','backbone','underscore','models/model','text!templates/main.html', 
        'views/navigation', 'views/player', 'views/content', 'views/header']

当我导航到localhost:3000它工作正常.

你能想到文本插件在从远程服务器(例如,CDN服务器)提供文本文件时遇到问题的任何原因吗？

Answer 1

我在跨域工作时遇到了文本插件的问题,也许你的两个本地主机服务器也遇到了这个问题.

在网络检查器中,我看到require.js正在尝试some-content.html.js取代而不是some-content.html.

您是在开发模式下运行此代码还是构建到生产集中？当您将所有内容捆绑在一起时,文本插件不应该具有相同的跨域麻烦.

以下是API文档部分(来自http://requirejs.org/docs/api.html):

baseUrl可以是不同域上的URL,作为将加载require.js的页面.RequireJS脚本加载适用于域.唯一的限制是文本加载的文本内容!插件:这些路径应该与页面位于同一个域中,至少在开发期间是这样.优化工具将内联文本!插件资源所以在使用优化工具后,您可以使用引用文本的资源!来自其他域的插件资源.

这篇文章帮助我解决了支持CORS的浏览器:

Answer 2

文本插件的文档提供了解决方案的提示:可以通过以下方式配置插件:它始终通过XHR获取远程资源,而无需附加.js后缀并通过脚本标记加载它.简单的解决方案是始终使用XHR强制执行:

requirejs.config({
   config: {
      text: {
         useXhr: function (url, protocol, hostname, port) {
            return true;
         }
      }
   }
});

请注意,远程服务器需要设置正确的CORS标头,这可能是一个安全问题.因此,在使用它时,为可信URL添加必要的检查,而不是简单地返回true.

Answer 3

我已经深入研究了文本插件的代码。

我发现文本插件假设开发人员将文本模板转换为 html，因为它驻留在不同的域中。

我已经更改了文本插件的代码以不假设它。

有人认为我做错了什么？

插件原代码：

            //Load the text. Use XHR if possible and in a browser.
            if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
                text.get(url, function (content) {
                    text.finishLoad(name, parsed.strip, content, onLoad, config);
                });
            } else {
                //Need to fetch the resource across domains. Assume
                //the resource has been optimized into a JS module. Fetch
                //by the module name + extension, but do not include the
                //!strip part to avoid file system issues.
                req([nonStripName], function (content) {
                    text.finishLoad(parsed.moduleName + '.' + parsed.ext,
                                    parsed.strip, content, onLoad, config);
                });
            }