在 Typescript 中通过 Webpack 导入 Jade 模板

Question

我正在尝试掌握当前的前端技术，并想使用 Webpack 加载 Jade 模板。使用 Javascript，这按预期工作。

app.js:

import * as foo from "html!jade-html!./header.jade";
document.write(foo.default);

但是如果我重命名为app.ts，内容不变，webpack构建：

ERROR in ./app.ts
(5,22): error TS2307: Cannot find module 'html!jade-html!./header.jade'.

我很惊讶使用 TypeScript 时模块加载语义会突然改变。给出了什么？

奖励积分：这个 Jade 加载片段可以写得更短吗？

Answer 1

TypeScript 为 import 关键字赋予特殊含义（它需要一个实际的模块）。您应该改为定义 require 函数并使用 var foo = require('...')（注意 var 而不是 import）。

这是一个要求定义的例子 from the ts-loader docs。

declare var require: {
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

在 Typescript 中通过 Webpack 导入 Jade 模板

Importing Jade templates through Webpack in Typescript

javascript

node.js

typescript

webpack

pug