10

TypeScript、Backbone、Mustacheを使用してWebアプリを作成しています。依存関係の読み込みにRequirejsを使用したい。

また、AMDコンパイルオプションをオンにして、TypeScript用のWebEssentialsビジュアルスタジオプラグインを使用しています。これに精通していない人のために、外部モジュールをインポートすると、タイプスクリプトファイルが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」という名前を付けると、正常に機能しますが、拡張子をモジュール名から除外したいと思います。

プラグイン参照と重複する拡張機能を取り除くために、単純な正規表現の置換でテキストプラグインを変更しました。

これを処理するためのより良い方法はありますか？

4

5 に答える 5

11

同様の問題に遭遇しました。最終的に解決しました。TypeScriptを参照してください: コンパイルすると、参照されていないインポートが削除されます

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

var applicationTemplate = require('text!templates/application.htm');
于 2013-03-28T21:06:15.317 に答える
5

これを行うには少し良い方法があります (私は typescript 2.0 を使用しています) 。

このコードは、requirejs 構成とプラグインが正しくセットアップされていることを前提としています。

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

これは、遅延コードを typescript に移行するのに大いに役立ちました。

于 2016-11-23T20:06:14.620 に答える
2

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/をご覧ください。

于 2014-03-09T21:20:28.587 に答える
0

TypeScript アプリケーションには Backbone と require.js を使用しています。
私たちは使用しません

import backbone = module("Backbone")

構文ではなく、

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

リファレンス、次に BootStrapper です。
このように、「text!htmlfile.html」構文は、require.js で完全に機能します。

TypeScriptと AMD での require.js の使用に関するブログをまとめました。 -js/

于 2012-12-18T01:22:22.757 に答える