Question

我想将require / import HTML模板作为我的代码中的字符串。但是遇到了一些错误的错误。

这是我正在使用的浏览器设置：

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”一起使用？

Answer 1

如果要在TypeScript中导入/要求与TypeScript模块不同的东西，则需要使用＆＃34; native＆＃34; 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

另一种选择是使用＆lt; amd-depdendency＆gt; 评论。

这样的代码（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;
        }
    }
});

使用tsify（Typescript）时，需要HTML文件作为Browserify中的模板字符串

2 个答案: