需要HTML文件作爲模板字符串在Browserify使用tsify（打字稿）

Question

我想require/import作爲字符串的HTML模板到我的代碼。但運行在一些transpile錯誤。

這是revelant 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> 

我嘗試了使用的不同設置超過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' } 

Usind 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' } 

我找不到一個例子「字符串」和「tsify 「在一起。有沒有人可以使用HTML模板來處理「browserify」和「tsify」的工作示例？

Answer 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 

Answer 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; 
     } 
    } 
});