无法使用 Parcel 在 Typescript 中导入“.html”文件

Question

我正在尝试使用 Typescript 和 Parcel 设置一个简单的项目。

在这个项目中，我试图从 .ts:

导入一个 .html 文件（或者更准确地说，它的路径）

import html from "../renderer/index.html";
console.log(html); // file:///home/foo/bar/dist/main/renderer.1c7e1d82.html

如多处所述，为了使其正常工作，我添加了以下声明文件 html.d.ts:

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

还有我的全 tsconfig.json:

{
    "compilerOptions": {
        "outDir": "dist",
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": false,
        "strict": true,
        "esModuleInterop": true,
    },
    "files": [
        "src/main/main.ts"
    ],
    "include": ["@types"]
}

配置似乎是正确的，因为我的 IDE 似乎识别了上面的导入，并且运行 tsc 没有失败并产生了预期的结果（require("../renderer/index.html")).

但是，当尝试与 Parcel (parcel build main.ts) 捆绑时。虽然编译本身按预期工作，但导入被替换为 new URL("renderer.1c7e1d82.html", "file:" + __filename).toString(); 它无法识别 d.ts 文件，因为会引发以下警告：

@parcel/transformer-typescript-types: Cannot find module '../renderer/index.html' or its corresponding type declarations.

  /home/angrykoala/Desktop/scratchpad/gaucho2/src/main/main.ts:9:18
     8 | 
  >  9 | import html from "../renderer/index.html";
  >    |                  ^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module '../renderer/index.html' or its corresponding type declarations.
    10 | console.log(html)
    11 |

根据文档，我的 .pretierrc 设置为使用 tsc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  }
}

然而，它没有考虑 tsconfig 中的 files 或 include 参数。我尝试过的任何其他排列（例如删除文件）都有同样的问题。

Answer 1

包裹字符串内联是使用 bundle-text: 前缀完成的。

import html from "bundle-text:../renderer/index.html";

Parcel 自动添加 devDependency @parcel/transformer-inline-string.

更多内容在 https://parceljs.org/features/bundle-inlining。

我通常创建一个定义文件global.d.ts，其中包括：

declare module "bundle-text:*" {
  const value: string;
  export default value;
}

并将行 includes: ["**/*.ts"] 添加到 tsconfig.json。

编辑：
有关 tsconfig includes 的更多信息，请访问 https://www.typescriptlang.org/tsconfig#include。
请注意，包含由模式 "**/*.ts".

涵盖的定义文件也很重要

无法使用 Parcel 在 Typescript 中导入“.html”文件

Can't import ".html" file in Typescript using Parcel

typescript

parceljs