Gọi trình cắm văn bản từ ánh xạ requirejs

Question

Tôi đang viết một ứng dụng web bằng cách sử dụng TypeScript, Backbone và Mustache. Tôi muốn sử dụng Requirejs để tải phụ thuộc.

Tôi cũng đang sử dụng plugin phòng thu trực quan của Web Essentials cho TypeScript với tùy chọn biên dịch AMD được bật. Đối với những người không quen thuộc với điều này, nó sẽ bọc tập tin kịch bản kiểu của bạn trong một mô-đun AMD nếu bạn nhập các mô-đun bên ngoài. Ví dụ:

Trong loại tập lệnh, tôi nhập các mô-đun sau vào tệp định nghĩa loại.

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

Đầu ra là một cái gì đó như:

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

Đối với mẫu, tôi đã tuyên bố sau đây trong một tập tin kiểu định nghĩa:

declare module "MainTemplate" { } 

Để hỗ trợ requirejs plugins, bạn cần khai báo mô-đun của mình là:

declare module "text!MainTemplate.html" { } 

Tôi muốn giữ tên mô-đun không có plugin và phần mở rộng tệp. Điều này sẽ khiến tôi có sự linh hoạt trong tương lai.

Tôi có ánh xạ sau theo yêu cầu.

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

Điều này sẽ gọi thành công plugin văn bản, plugin tải sai url. Chọn lọc mã nguồn cho plugin văn bản, tôi thấy rằng đoạn mã sau là thủ phạm.

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

Nếu tôi đặt tên cho mô-đun, 'MainTemplate.html' nó hoạt động tốt nhưng tôi muốn giữ phần mở rộng ra khỏi tên module.

Tôi đã sửa đổi plugin văn bản bằng thay thế regex đơn giản để loại bỏ tham chiếu plugin và tiện ích trùng lặp.

Có cách nào tốt hơn để xử lý việc này không?

Answer 1

Ran vào vấn đề tương tự. Giải quyết cuối cùng. Xem TypeScript: compiling removes unreferenced imports

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

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

Answer 2

Chúng tôi đang sử dụng Backbone và require.js cho các ứng dụng TypeScript của chúng tôi.
Chúng tôi không sử dụng cú pháp

import backbone = module("Backbone") 

, nhưng thay vì sử dụng một tài liệu tham khảo

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

, và sau đó một bootstrapper.
Bằng cách này, cú pháp 'text! Htmlfile.html' hoạt động hoàn hảo với require.js.

tôi đã đặt cùng một blog về việc sử dụng require.js với nguyên cảo và AMD: http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/

Answer 3

Vì TypeScript 0.9.0 Tôi nghĩ rằng bạn cần phải làm như sau:

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

Kiểm tra hiểu thêm tại http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/

Answer 4

Đối với nguyên cảo 1.0 này làm việc cho tôi. Đầu tiên tôi tạo tệp .d.ts lưu trữ tất cả các khai báo mô-đun cho mỗi mẫu văn bản.

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

sau đó để tham khảo mẫu văn bản tôi thêm các dòng này lên trên lớp/mô-đun.

/// <reference path="../texttemplate.d.ts"/> 
import detailsTemplate = require('text!views/details/details.html'); 

Dòng tham chiếu không thực sự cần thiết vì tệp .d.ts được chọn trên toàn cầu. Nhưng tôi đã thêm nó như một lời nhắc nhở về cách giải quyết. Nó cũng làm cho nó dễ dàng để ctrl + bấm vào để đi các d.ts. tập tin.

Answer 5

Có một cách đẹp hơn một chút để làm điều này (Tôi đang sử dụng nguyên cảo 2.0) Được tham chiếu ở đây: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

Mã này hy vọng rằng cấu hình và plugins requirejs bạn được thiết lập một cách chính xác:

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

Điều này đã giúp tôi rất nhiều để di chuyển mã bị trễ sang bản đánh số.