使用 tsify (Typescript) 时需要 HTML 文件作为 Browserify 中的模板字符串
Require HTML files as template String in Browserify when using 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" 一起使用?
如果你想在 TypeScript 中 import/require 一些不同于 TypeScript 模块的东西,你需要使用 "native" 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
另一种选择是使用 注释。
这样的代码(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;
}
产生输出(IS 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;
}
}
});
我想将 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" 一起使用?
如果你想在 TypeScript 中 import/require 一些不同于 TypeScript 模块的东西,你需要使用 "native" 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
另一种选择是使用
这样的代码(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;
}
产生输出(IS 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;
}
}
});