अपेक्षित मैपिंग से टेक्स्ट प्लगइन को आमंत्रित करें

Question

मैं टाइपस्क्रिप्ट, बैकबोन और मूंछ का उपयोग करके एक वेब ऐप लिख रहा हूं। मैं निर्भरता लोडिंग के लिए Requjs का उपयोग करना चाहता हूँ।

मैं एएमडी संकलन विकल्प के साथ टाइपस्क्रिप्ट के लिए वेब अनिवार्य दृश्य स्टूडियो प्लगइन का भी उपयोग कर रहा हूं। उन लोगों के लिए जो इससे परिचित नहीं हैं, यदि आप बाहरी मॉड्यूल आयात करते हैं तो यह आपकी टाइप स्क्रिप्ट फ़ाइल को एएमडी मॉड्यूल में लपेट देगा। उदाहरण के लिए:

टाइप स्क्रिप्ट में मैं टाइप परिभाषा फ़ाइलों में निम्न मॉड्यूल आयात करता हूं। ,

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" 
     } 
    } 
} 

यह सफलतापूर्वक टेक्स्ट प्लगइन को आमंत्रित करता है, हालांकि प्लगइन गलत यूआरएल लोड करता है। पाठ प्लगइन के लिए स्रोत कोड के माध्यम से स्थानांतरण, मैंने पाया कि निम्नलिखित कोड अपराधी है।

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

अगर मैं मॉड्यूल का नाम, 'MainTemplate.html' यह ठीक काम करता है, लेकिन मैं मॉड्यूल का नाम से बाहर विस्तार करना जारी रखना चाहते।

मैंने प्लगइन संदर्भ और डुप्लिकेट एक्सटेंशन को बाहर निकालने के लिए एक साधारण रेगेक्स प्रतिस्थापन के साथ टेक्स्ट प्लगइन को संशोधित किया है।

क्या इसे संभालने का कोई बेहतर तरीका है?

Answer 1

समान मुद्दे में Ran। अंत में हल TypeScript: compiling removes unreferenced imports

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

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

Answer 2

हम अपने टाइपस्क्रिप्ट अनुप्रयोगों के लिए बैकबोन और require.js का उपयोग कर रहे हैं।
हम

import backbone = module("Backbone") 

वाक्य रचना का उपयोग नहीं करते, बल्कि एक

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

संदर्भ, और फिर एक Bootstrapper का उपयोग करें।
इस तरह, 'text! Htmlfile.html' वाक्यविन्यास requ.js के साथ पूरी तरह से काम करता है।

मैं एक साथ टाइपप्रति और एएमडी के साथ require.js के प्रयोग पर एक ब्लॉग डाल दिया है: http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/

Answer 3

टाइपस्क्रिप्ट 0.9 के बाद से देखें।0 मुझे लगता है कि आप निम्न कार्य करने होंगे: http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/

Answer 4

पर अधिक टाइपप्रति 1.0 के लिए

/// <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

एक से थोड़ा अच्छे (मैं टाइपप्रति 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; 

इससे मुझे लैससी कोड को टाइपस्क्रिप्ट में माइग्रेट करने में बहुत मदद मिली।