require.js文本插件在文件名中添加“.js”

require.js text plugin adds ".js" to the file name

本文关键字：js 添加 文本 插件 require 文件名      更新时间：2023-09-26

我正在尝试使用 requirejs 和文本插件，但我遇到了奇怪的问题。

我有两个网络服务器：

  1. 本地主机：3000 - 充当CDN，并具有所有静态文件：JS，图像，CSS和模板
  2. 本地主机：3001 - 服务器 - 充当 REST 服务器，仅提供一个文件，即主文件.html文件

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

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

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

我使用以下语法：

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

当我导航到本地主机：3000时，它工作正常。

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

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

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

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

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

在网络检查器中，我看到require.js试图获取诸如some-content.html.js而不是some-content.html之类的东西。

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

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

baseUrl 可以是不同域上的 URL，作为将 负载要求.js。RequireJS 脚本加载跨域工作。这 唯一的限制是文本加载的文本内容！插件：那些 路径应与页面位于同一域中，至少在 发展。优化工具将内联文本！.plugin 资源，以便在使用优化工具后，您可以使用资源 那个参考文本！来自另一个域的插件资源。

这里有一篇文章帮助我为支持 CORS 的浏览器解决这个问题：

我已经挖掘了文本插件的代码。

我发现文本插件假设开发人员将文本模板转换为 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);
                });
            }
除了

运行 r.js 优化器和将我的模板编译成.js文件之外，我已经破解了我在互联网上看到的每个解决方案。

一种临时解决方法是将模板放在与 index.html 文件相同的目录中。 这当然不能解决问题，但如果你像我一样处于停滞状态，那么这至少会让你再次行动。

我遇到了同样的问题，解决方法是确保主文件.js文件与 *.htm 文件从同一域加载。 当它们不同时，require 会将.js附加到 html 文件中，从而产生 404。

这样的配置在当前文本中不起作用！ 插件。我的解决方案是在"文本"模块中覆盖useXhr方法

require(["text"], function (text)
{   if( location.port == '4502' || location.port == '4503' )// AEM env-t
        text.useXhr = function(){ return true; }
    require(["loader/widget/WidgetLoader"]); // dependent on HTML templates by text! plugin
});

作为另一种替代方法，您可以使用jQuery get方法以纯文本形式获取模板的内容，然后使用Handlebars对其进行编译。在花了几个小时进入论坛阅读有关require.js文本插件和CORS的问题后，我来到了这个解决方案作为最后的手段。下面是一个例子：

模板 ：

<span class="badge badge-pill badge-danger">Default</span>
<div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
        {{body}}
    </div>
</div>

js 脚本：

var deps = [
    'jquery',
    'handlebars',
];
require(deps, function($, handlebars){
    var template = 'https://your_site/raw.templates/basic.handlebars';
    $.get(template, function( data, textStatus, jqxhr ) {
        var Handlebars = handlebars;
        var basicTemplate = Handlebars.compile(data);
        var context = {title: "My New Post", body: "This is my first post!"};
        var html = basicTemplate(context);
        var grid = document.createElement('div');
        grid.setAttribute('id', 'itemsGrid');
        grid.innerHTML = html;
        document.body.appendChild(grid);
    });
});
相关文章：