从requirejs映射调用文本插件

Question

我正在使用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'它工作正常,但我想保留扩展模块名称.

我已经使用简单的正则表达式替换修改了文本插件,以去除插件引用和重复的扩展.

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

Answer 1

陷入类似的问题.终于解决了.请参阅TypeScript:编译删除未引用的导入

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

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

Answer 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键并单击以转到d.ts. 文件.

Answer 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;

这对我将滞后代码迁移到打字稿有很大帮助。