requirejsマッピングからテキストプラグインを呼び出す

Question

私は、TypeScript、Backbone、およびMustacheを使用してWebアプリケーションを作成しています。依存関係の読み込みにRequirejsを使いたい。

また、AMD 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.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: compiling removes unreferenced imports

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

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

Answer 2

私たちは、TypeScriptアプリケーションにバックボーンとrequire.jsを使用しています。
は、我々は

import backbone = module("Backbone") 

構文を使用するのではなく、

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

参照して、ブートストラップを使用しないでください。
このように、 'text！htmlfile.html'構文はrequire.jsで完全に機能します。

私は活字体とAMDとのrequire.jsを使用して一緒にブログを入れている： http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/

Answer 3

TypeScript 0.9以降です。0私は、あなたが次の操作を行う必要があると思う：活字体1.0の場合http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/

Answer 4

で

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

チェックアウトより多くの、これは私のために動作します。 まず、各テキストテンプレートのすべてのモジュール宣言を格納する.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 5

これを行うには、わずかによりよい方法があります（私は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; 

これは、ラギスコードをタイプスクリプトに移行するのに大いに役立ちました。