Invoquer le plugin de texte depuis la cartographie requirejs

Question

Je suis en train d'écrire une application web en utilisant TypeScript, Backbone et Mustache. Je veux utiliser Requirejs pour le chargement des dépendances.

J'utilise également le plugin Web Essentials pour Visual Studio pour TypeScript avec l'option de compilation AMD activée. Pour ceux qui ne sont pas familiers avec cela, il enveloppera votre fichier TypeScript dans un module AMD si vous importez des modules externes. Par exemple:

En TypeScript j'importe les modules suivants dans des fichiers de définition de type.

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

La sortie ressemble à quelque chose comme :

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

Pour le modèle, j'ai déclaré ce qui suit dans un fichier de définition de type :

déclarer le module "MainTemplate" { }

Pour prendre en charge les plugins requirejs, vous devez déclarer votre module comme :

déclarer le module "text!MainTemplate.html" { }

J'aimerais garder le nom du module libre de plugins et d'extensions de fichiers. Cela me laisserait une certaine flexibilité à l'avenir.

J'ai le mappage suivant dans require.

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

Cela invoque avec succès le plugin text cependant, le plugin charge le mauvais URL. En parcourant le code source du plugin text, j'ai trouvé que le code suivant est le coupable.

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

Si je nomme le module, 'MainTemplate.html' cela fonctionne bien mais j'aimerais garder l'extension hors du nom du module.

J'ai modifié le plugin text avec un simple remplacement regex pour supprimer la référence au plugin et l'extension en double.

Y a-t-il une meilleure façon de gérer cela?

Answer 1

Ran into similar issue. Solved finally. See TypeScript: compiling removes unreferenced imports

/// 

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

Answer 2

Pour Typescript 1.0, cela fonctionne pour moi. Tout d'abord, j'ai créé un fichier .d.ts qui stocke toutes les déclarations de module pour chaque modèle de texte.

//solution de contournement pour le manque de prise en charge de la notation de modèle de texte requirejs de typescript
//n'oubliez pas qu'une référence à la variable d'import doit être trouvée dans la classe, sinon typescript ignore l'importation
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;
} 

ensuite, pour faire référence au modèle de texte, j'ajoute ces lignes en haut de la classe/module.

/// 
import detailsTemplate = require('text!views/details/details.html');

La ligne de référence n'est pas vraiment nécessaire, car le fichier .d.ts est pris en compte globalement. Mais je l'ai ajoutée comme rappel de la solution de contournement. Cela rend également facile de faire un clic ctrl + pour aller dans le fichier d.ts.

Answer 3

Il y a une manière légèrement plus agréable de faire cela (j'utilise typescript 2.0) Référencé ici: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

Ce code suppose que votre configuration requirejs et vos plugins sont correctement configurés:

/// 
declare let template: string;

Cela m'a beaucoup aidé à migrer du code hérité vers typescript.

Answer 4

Depuis TypeScript 0.9.0, je pense que vous devez faire ce qui suit :

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

Découvrez-en davantage sur http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/

Answer 5

Nous utilisons Backbone et require.js pour nos applications TypeScript.
Nous n'utilisons pas la

import backbone = module("Backbone")

syntaxe, mais utilisons plutôt une

/// 

référence, puis un BootStrapper.
De cette manière, la syntaxe 'text!htmlfile.html' fonctionne parfaitement avec require.js.

J'ai écrit un blog sur l'utilisation de require.js avec TypeScript et AMD : http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/