可以导入。使用包裹中的打字稿中文件

Question

我正在尝试使用TypeScript和 parcel ”。

在此项目中，我正在尝试导入.html file（或更准确地，更准确地说是其路径

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不会失败，并产生预期的结果（quirect（“ ../ Renderer/index.html”））。

但是，尝试与包裹捆绑时（包裹构建main.ts）。虽然汇编本身可以按预期运行，但导入被new URL替换（“ Renderer.1c7e1d82.html”，“ file：” + __fileName）.toString（）.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"]
  }
}

但是，它未能考虑到或includ来自TSCONFIG的参数。我尝试过的任何其他置换（例如删除文件）都有相同的问题。

Answer 1

包裹字符串内线是使用Bundle-Text：前缀完成的。

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

包裹会自动添加DevDepentency @Parcel/Transformer-Inline-string。

更多信息 https://parceljs.org/features/bundle-inlining 。

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

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

添加行包括：[“ **/*。ts”] to tsconfig.json。

编辑：
有关tsconfig 的更多更多信息.typescriptlang.org/tsconfig＃包括。
请注意，还必须包括“定义文件”，该文件由模式“ **/*。ts”覆盖。