从 requirejs 映射调用文本插件答案

【问题标题】：Invoke the text plugin from requirejs mapping从 requirejs 映射调用文本插件
【发布时间】：2016-11-24 04:06:14
【问题描述】：

我正在使用 TypeScript、Backbone 和 Mustache 编写一个 Web 应用程序。我想使用 Requirejs 进行依赖加载。

我还在使用用于 TypeScript 的 Web Essentials Visual Studio 插件，并打开了 AMD 编译选项。对于那些不熟悉这一点的人，如果您导入外部模块，它会将您的类型脚本文件包装在 AMD 模块中。例如：

在类型脚本中，我在类型定义文件中导入以下模块。

export import Backbone = module("Backbone"); 
import mainTemplate = module("MainTemplate");

输出类似于：

define(["require", "exports", "Backbone", "MainTemplate"], function(require, exports, __Backbone__, __mainTemplate__) {
//...code goes here ...
});

对于模板，我在类型定义文件中声明了以下内容：

declare module "MainTemplate" { }

为了支持requirejs插件，你需要将你的模块声明为：

declare module "text!MainTemplate.html" { }

我希望模块名称不包含插件和文件扩展名。这将使我在未来有一些灵活性。

我在 require 中有以下映射。

require.config({
    map: {
        "MyModule": {
            "MainTemplate": "text!MainTemplate.html"
        }
    }
}

这成功调用了文本插件，但是插件加载了错误的 url。筛选了文本插件的源码，发现下面的代码才是罪魁祸首。

load: function (name, req, onLoad, config) {
  ...
  url = req.toUrl(nonStripName),
  //returns "scripts/**text!**MainTemplate.html**.html**"
  ...
}

如果我将模块命名为“MainTemplate.html”，它可以正常工作，但我希望将扩展名保留在模块名称之外。

我已经用一个简单的正则表达式替换修改了文本插件，以去除插件引用和重复的扩展名。

有没有更好的方法来处理这个问题？

【问题讨论】：

标签： requirejs typescript requirejs-text

【解决方案1】：

遇到了类似的问题。终于解决了。见TypeScript: compiling removes unreferenced imports

/// <amd-dependency path="text!templates/application.htm" />

var applicationTemplate = require('text!templates/application.htm');

【讨论】：

这是一个不错的解决方法，希望他们将来会支持这种模块语法。

【解决方案2】：

对于 Typescript 1.0，这对我有用。首先，我创建了一个 .d.ts 文件，其中存储了每个文本模板的所有模块声明。

//workaround for typescript's lack of support for requirejs text template notation
//remember that a reference to the import variable has to be found in the class, otherwise typescript ignores the import
declare module "text!views/details/details.html" {
    var text: string;
    export = text;
} 
declare module "text!views/layout/layout.html" {
    var text: string;
    export = text;
} 
declare module "text!views/home/home.html" {
    var text: string;
    export = text;
}

然后为了引用文本模板，我将这些行添加到类/模块的顶部。

/// <reference path="../texttemplate.d.ts"/>
import detailsTemplate = require('text!views/details/details.html');

实际上不需要参考线，因为 .d.ts 文件是全局获取的。但我添加它以提醒解决方法。它还可以轻松地通过 ctrl+click 进入 d.ts。文件。

【讨论】：

为什么这比@Sean Smith 提供的答案更好？在我看来，它更像是打字。以这种方式做事有语义优势吗？比如 Visual Studio IntelliSense 帮助或我看不到的东西？

【解决方案3】：

有一种更好的方法可以做到这一点（我使用的是 typescript 2.0）此处引用：https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

此代码要求您的 requirejs 配置和插件设置正确：

/// <amd-dependency path="text!./about.html" name="template"/>
declare let template: string;

这对我将遗留代码迁移到打字稿帮助很大。

【讨论】：

【解决方案4】：

从 TypeScript 0.9.0 开始，我认为您需要执行以下操作：

/// <amd-dependency path="text!templates/application.htm" />
declare var require:(moduleId:string) => any;
var applicationTemplate:string = require("text!templates/application.htm");

在http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/查看更多信息

【讨论】：

最好使用 /// 然后声明 var globalNavTemplate;

【解决方案5】：

我们在 TypeScript 应用程序中使用 Backbone 和 require.js。
我们不使用

import backbone = module("Backbone")

语法，而是使用

/// <reference path="../../modules/Backbone.d.ts" />

参考，然后是 BootStrapper。
这样，'text!htmlfile.html' 语法与 require.js 完美配合。

我整理了一篇关于在 TypeScript 和 AMD 中使用 require.js 的博客： http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/

【讨论】：