צריך קבצי HTML כ-string תבנית ב-Browserify כשמשתמשים ב-tsify (TypeScript)

אני רוצה require/import תבניות HTML כמחרוזות לתוך הקוד שלי. אבל אני נתקל בכמה שגיאות בזמן התרגום.

זוהי תצורת Browserify הרלוונטית שבה אני משתמש:

browserify({ basedir: './src' })
    .transform(stringify(['.tpl.html']))
    .add('app.ts')
    .plugin(tsify)

ב־app.ts אני רוצה לייבא תבנית כך:

import template from './app.tpl.html';
console.log(template);

איפה app.tpl.html עשוי להיראות כך:

<h1>Hello!</h1>

ניסיתי הגדרות שונות בשימוש ב-require במקום ב-import. בשימוש ב-require אני מקבל את השגיאה הבאה:

Browserify Error { [TypeScript error: src/components/app.ts(1,9): 
Error TS2304: Cannot find name 'require'.]
message: 'src/components/app.ts(1,9): Error TS2304: Cannot find name \'require\'.',
fileName: 'src/components/app.ts',
line: 1,
column: 9,
name: 'TypeScript error' }

בשימוש ב-import המודול לא נמצא ואני מקבל את השגיאה הבאה:

Browserify Error { [TypeScript error: src/components/test.ts(1,22): Error TS2307: Cannot find module './test.tpl.html'.]
message: 'src/components/test.ts(1,22): Error TS2307: Cannot find module \'./test.tpl.html\'.',
fileName: 'src/components/test.ts',
line: 1,
column: 22,
name: 'TypeScript error' }

לא הצלחתי למצוא דוגמה שמשתמשת ב"stringify" ו"tsify" יחד. האם למישהו יש דוגמה שעובדת איך להשתמש בתבניות HTML יחד עם "browserify" ו"tsify"?

תשובה #1

אם אתה רוצה לייבא/לדרוש ב-TypeScript משהו שונה ממודול TypeScript, אתה צריך להשתמש בפונקציית 'require' 'טבעית' (במקרה זה להגדיר על ידי browserify). קומפיילר TypeScript לא מודע לכך עד שתודיע לו.

declare function require (id: string): any; // declare there will be 'require' function in the runtime 

var template = require('./app.tpl.html'); // use declared function in pure JS

תשובה #2

אפשרות נוספת היא להשתמש בהערת <amd-depdendency>.

כתוב קוד כזה (menuTemplate.jst הוא קובץ תבנית סטטי):

/// <amd-dependency path="general/menuTemplate.jst" name="menuTemplate" />

import Marionette = require("backbone.marionette");
declare var menuTemplate: string;

class MenuView extends Marionette.ItemView<any> {
  template = menuTemplate;
}

מפיק פלט (ES 6):

/// <amd-dependency path="general/menuTemplate.jst" name="menuTemplate" />
define(["require", "exports", "general/menuTemplate.jst", "backbone.marionette"], function (require, exports, menuTemplate, Marionette) {
    "use strict";
    class MenuView extends Marionette.ItemView {
        constructor(...args) {
            super(...args);
            this.template = menuTemplate;
        }
    }
});