javascript - 在 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;
};