在 Typescript 中通过 Webpack 导入 Jade 模板答案

【问题标题】：Importing Jade templates through Webpack in Typescript在 Typescript 中通过 Webpack 导入 Jade 模板
【发布时间】：2015-12-21 00:54:06
【问题描述】：

我正在尝试掌握当前的前端技术，并希望使用 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 加载 sn-p 可以写得更短吗？

【问题讨论】：

对于它的价值，我在我的加载器数组中使用jade-loader 并使用import * as template from './relative/path/to/template.jade' 在 TypeScript 中加载了模板。这仍然在控制台中给我一个 TypeScript 错误，即使我什至通过 filesGlob 属性在 tsConfig.json 中传递了我的所有 .jade 文件。让我知道你是否有任何收获！
我的 package.json 在 devDependencies 中有 "typescript": "^1.6.2"，但由于某种原因，似乎没有内置节点类型？
@JaKXz：好问题...我确定我也遇到了同样的问题。我实际上再也找不到答案了（上个月一直在尝试其他事情），但如果您想尝试比较，我已经通过here 上传了我现在拥有的内容。希望它可以帮助你 - 抱歉，我现在没有更好的答案。
是的，这很奇怪。安装节点的类型为我解决了这个问题。感谢分享！
哈，太好了。很高兴你成功了！

标签： javascript node.js typescript pug webpack

【解决方案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;
};

【讨论】：