我试图导入一个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, typescript知道内容的类型(String)。但是它不知道如何解析它。
如果其他人有同样的问题:
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。向包中添加一个脚本。构建并运行应用程序
"scripts": {
"start": "tsc && babel src --out-dir lib --extensions '.ts,.tsx' && node lib/index.js"
}
tsc将确保所有的输入是正确的，Babel将接管翻译部分。