Esbuild允许导入".png"作为base64代码，我这样做:
const bundle = await esbuild.build({
write: false, bundle: true,
entryPoints: ["./game/main.ts"],
format: 'esm', minify: true,
loader: { ".png": "base64" }
})
然后，在捆绑的文件中，我写一些导入:
import Image from "./image.png"
多亏了这一点，我可以将图像嵌入到代码中，同时保持它们的原始形式。
技术上是可行的。问题是编辑器- Visual Studio Code，根本不识别文件，给我恼人的错误:
import Image from "./image.png" ❌
💭 Unable to load a local module: "file:///...image.png".
💭 Please check the file path.deno(no-local)
我试图添加@ts-ignore， @ts-nocheck，没有结果-我试图在tsconfig中添加排除:
- "exclude"["* .png"
- "排除"; ["png.ts"]其中
png.ts将是带有png导入的脚本
没有好!
现在我只是保持这个东西在png.ts，我想我会尽量不打开它太频繁-然后错误环。
我的意思是……我可以忍受，如果不行，我可以重新启动编辑器，但解决方案将是很棒的
感谢阅读，希望有人能帮助😃
在VS Code中使用Deno扩展作为诊断提供程序时，无法抑制与模块分辨率相关的诊断错误。
这是预期和有用的行为，因为Deno不支持你想做的事情:虽然Deno在类型检查时支持自定义环境类型，但它不提供可定制的模块分辨率，除了导入映射-并且(至少目前-作为Deno v1.32.3)没有场景，Deno可以解析一个实际的PNG文件的导入。
此时，您可能会问自己—使用Deno扩展为esbuild模块图提供编译诊断是否有意义?我解释这个问题的意思是你真正想要的是覆盖Deno的语言服务器来模仿esbuild的自定义内容类型加载器功能-而且，目前，这是不可能的。
这留下了两个变通方法:
在你的工作空间中禁用Deno扩展，并使用所需的工具设置创建一个自定义的vanilla TypeScript环境- Deno类型，环境类型，模块分辨率，检测，格式化等(深入研究所有这些细节远远超出了任何一个堆栈溢出答案的范围-这将是几个单独的问题。)
使用Deno扩展名，并为您的工作区配置一个自定义导入映射，该映射将每个自定义文件导入说明符映射到描述其导出的声明文件。这个导入映射应该只在工作空间中使用，以满足Deno的LSP——而不是在使用esbuild进行实际编译时使用。我将在下面提供一个基本示例:
配置扩展以使用自定义导入映射:
./.vscode/settings.json:
{
"deno.enable": true,
"deno.importMap": "./custom_file_import_map.json"
}
为每个指向描述导出的声明文件的自定义文件导入说明符创建一个条目:
./custom_file_import_map.json:
{
"imports": {
"./image1.png": "./custom_file_base64_image.d.ts",
"./image2.png": "./custom_file_base64_image.d.ts"
}
}
为每个自定义文件类型创建一个声明文件——下面是一个将在esbuild中作为base64字符串导入的PNG文件的示例:
./custom_file_base64_image.d.ts:
declare const base64Image: string;
export default base64Image;
配置后，您将能够在导入语句中使用自定义文件说明符而没有任何抱怨(并且它们将具有您声明的正确类型)，但是尝试在导入映射之外导入自定义文件将继续产生诊断错误:
./main.ts:
import Image1 from "./image1.png"; // Ok
import Image2 from "./image2.png"; // Ok
import Image3 from "./image3.png"; /* Error
~~~~~~~~~~~~~~
Unable to load a local module: "file:///Users/deno/so-75953426/image3.png".
Please check the file path.deno(no-local) */
type TypeofImage1 = typeof Image1;
//^? type TypeofImage1 = string
潜在相关:denoland/deno#17867
也许可以尝试添加.d.ts。
declare module "*.png" {
const value: string;
export default value;
}
然后包括你的图像，而不是排除它们。
我还没有测试过这个，只是大声想想。