requirejs 매핑에서 텍스트 플러그인을 호출하십시오.

Question

저는 TypeScript, Backbone 및 Mustache를 사용하여 웹 응용 프로그램을 작성하고 있습니다. 의존성로드에 Requirejs를 사용하고 싶습니다.

또한 AMD 컴파일 옵션이 켜져있는 TypeScript 용 Web Essentials 비주얼 스튜디오 플러그인을 사용하고 있습니다. 익숙하지 않은 사용자는 외부 모듈을 가져 오면 유형 스크립트 파일을 AMD 모듈로 래핑합니다. 예 :

유형 스크립트에서 유형 정의 파일에 다음 모듈을 가져옵니다. ,

declare module "MainTemplate" { } 

requirejs 플러그인을 지원하기 위해 다음 유형 정의 파일에 다음과 같은 템플릿의

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

, 내가 선언했습니다

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

출력은 뭔가처럼 모듈을 다음과 같이 선언해야합니다.

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"); 

체크 아웃 더이 나를 위해 작동합니다. 먼저 각 텍스트 템플릿에 대한 모든 모듈 선언을 저장하는 .dts 파일을 만들었습니다.

//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를 쉽게 할 수 있습니다. 파일. https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

이 코드가 requirejs 구성 및 플러그인이 올바르게 설정되어 있는지 기대 : 여기에 참조 된이 작업을 수행하는 약간 더 좋은 방법은 (내가 타이프 라이터 2.0을 사용하고 있습니다) 을가

Answer 5

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

이것은 lagacy 코드를 타이프 ​​스크립트로 마이그레이션하는 데 많은 도움이되었습니다.