Typescript 将 html 个文件作为字符串导入（Express）
Typescript importing html files as a string (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 之类的。任何想法为什么会这样？我卡住了...
通过安装 Babel 修复了它。感谢 index.d.ts 打字稿知道内容的类型（字符串）。但是它不知道如何解析它。
以防其他人遇到同样的问题：
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 将接管转译部分。
我正在尝试将 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 之类的。任何想法为什么会这样？我卡住了...
通过安装 Babel 修复了它。感谢 index.d.ts 打字稿知道内容的类型（字符串）。但是它不知道如何解析它。
以防其他人遇到同样的问题：
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 将接管转译部分。