Typescript 将 html 文件作为字符串导入 (Express)答案

【问题标题】：Typescript importing html files as a string (Express)Typescript 将 html 文件作为字符串导入 (Express)
【发布时间】：2021-02-24 14:57:10
【问题描述】：

我正在尝试将带有import template as "./template.html" 的html 文件作为字符串导入，以便通过Express 的res.end(template); 函数将其提供给用户。

我在项目的根目录中创建了一个index.d.ts 文件，其中包含以下内容：

declare module '*.html' {
    const value: string;
    export default value;
}

它让我可以毫无问题地导入template.html，但是当我运行程序时它会说

/home/koen/Workspace/xyz/src/template.html:1
<!DOCTYPE html>
^

SyntaxError: Unexpected token <
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/koen/Workspace/xyz/out/index.js:11:41)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

这几乎就像它试图将 html 作为 Javascript 或其他东西运行一样。任何想法为什么会发生这种情况？我被卡住了……

【问题讨论】：

标签： typescript express import typing

【解决方案1】：

通过安装 Babel 修复它。感谢index.d.ts typescript 知道内容将是什么类型（字符串）。但它不知道如何解析它。

如果其他人遇到同样的问题：

1。安装 babel core 和 cli

运行以下命令：npm install --save-dev @babel/cli @babel/core

2。安装 Typescript 预设

Babel 将接管从 Typescript 到 Javascript 的转换。为此，我们必须安装 preset-typescript 预设。

运行以下命令：npm install --save-dev @babel/preset-typescript

现在在项目的根目录中打开babel.config.json（如果不存在，则创建它）并添加以下内容：

{
    "presets": [
        "@babel/preset-typescript"
    ]
}

3。防止 tsc 转译

我们在这里并没有完全摆脱tsc。我们仍将使用它来检查类型。但如前所述，Babel 正在接管编译过程，我们不希望发生冲突。在tsconfig.json 内部，将compilerOptions.noEmit 设置为true。

4。可选：安装 `@babel/preset-env` 预设

如果您打算使用 ES2015+ 语法，则必须安装此语法。过程与步骤 2 相同。

5。安装 babel-plugin-transform-html-import-to-string

天哪……是的。我知道这是一个很长的名字。这是一个 Babel 插件，可以让我们导入 html 文件。

运行命令：npm install --save-dev babel-plugin-transform-html-import-to-string

在项目的根目录中打开.babelrc 文件（同样，如果它不存在，请创建它）并添加以下内容：

{
    "plugins": [
        "transform-html-import-to-string"
    ]
}

6。将脚本添加到 package.json 以构建和运行应用程序

"scripts": {
    "start": "tsc && babel src --out-dir lib --extensions '.ts,.tsx' && node lib/index.js"
}

tsc 会确保所有的输入都是正确的，babel 会接管转译部分。

【讨论】：

1。 安装 babel core 和 cli

2。 安装 Typescript 预设

3。 防止 tsc 转译

4。 可选：安装 @babel/preset-env 预设