时间戳

首页 > 解决方案 > Typescript 将 html 文件作为字符串导入 (Express)

typescript - Typescript 将 html 文件作为字符串导入 (Express)

问题描述

我正在尝试将 html 文件import template as "./template.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 或其他东西运行一样。任何想法为什么会发生这种情况？我被困住了...

标签： typescriptexpressimporttyping

解决方案

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

如果其他人有同样的问题：

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 会接管转译部分。

推荐阅读