忽略导入错误的.png文件/除了js/ts文件以外的文件。

huangapple go评论56阅读模式
英文:

Ignore import error for .png files/ files other than js/ts

问题

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" ❌
🚳 无法加载本地模块:“file:///...image.png”。
🚳 请检查文件路径。deno(no-local)

我尝试添加 @ts-ignore、@ts-nocheck 但没有结果 - 我尝试在 tsconfig 中添加排除项:

  • "exclude": ["*.png"]
  • "exclude": ["png.ts"] 其中 png.ts 将是包含 png 导入的脚本

都不起作用!

现在我只是将这些内容保存在 png.ts 中,我想我不会经常打开它 - 然后错误会出现。

我的意思是...我可以忍受,如果不行,我可以重新启动编辑器,但解决方案将是很棒的。

感谢阅读,希望有人能帮助你 😊

英文:

Esbuild allows importing files like ".png" as base64 code, I do it like so:

const bundle = await esbuild.build({
        write: false, bundle: true,
        entryPoints: ["./game/main.ts"],
        format: 'esm', minify: true,
        loader: { ".png": "base64" }
})

Then, in files that are bundled I write some imports:

import Image from "./image.png"

Thanks to that I can embed images into the code and at the same time keep them in their original form.

It technically works. The problem is editor - Visual Studio Code, doesn't recognize the files at all and gives me annoying error:

import Image from "./image.png" ❌
💭 Unable to load a local module: "file:///...image.png". 
💭 Please check the file path.deno(no-local)

I tried to add @ts-ignore, @ts-nocheck with no outcomes - I tried to add exclusions in tsconfig:

  • "exclude": ["*.png"]
  • "exclude": ["png.ts"] where png.ts would be script with png imports

No good!

Now I am just keeping this stuff in png.ts and I guess I'll be trying not to open it too often - then the error rings.

I mean... I can bare it, if not I can just restart editor, but the solution would be awesome

Thank you for reading, hope someone can help 😃

答案1

得分: 0

Maybe try adding a .d.ts.

declare module "*.png" {
  const value: string;
  export default value;
}

And then include your images instead of excluding them.

I haven't tested this, just thinking out loud.

英文:

Maybe try adding a .d.ts.

declare module "*.png" {
  const value: string;
  export default value;
}

And then include your images instead of excluding them.

I haven't tested this, just thinking out loud.

答案2

得分: 0

以下是您要翻译的内容:

无法在使用Deno扩展作为VS Code中的诊断提供程序时抑制与模块解析相关的诊断错误。

这是预期的且有用的行为,因为Deno不支持您尝试的操作:尽管Deno在类型检查时支持自定义环境类型,但除导入映射之外,它不提供可定制的模块解析——并且(至少目前——截至Deno v1.32.3),Deno无法解析实际PNG文件的导入。

此时您可能会问自己——使用Deno扩展来为esbuild模块图提供编译诊断是否有意义?

我理解这个问题的意思是您实际上想要覆盖Deno的Language Server以模仿esbuild的自定义内容类型加载器功能,目前这是不可能的。

这留下了两种解决方法:

  1. 禁用工作区的Deno扩展,并创建一个具有所需工具设置的自定义普通TypeScript环境——包括Deno类型环境类型模块解析、代码检查、格式化等等(深入了解所有这些细节远远超出了任何一个单独的Stack Overflow回答的范围——这将是几个不同的问题)。

  2. 使用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"
  }
}

为每种自定义文件类型创建一个声明文件——这里是一个PNG文件的示例,它将以esbuild中的base64字符串形式导入:

./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
                   ~~~~~~~~~~~~~~
无法加载本地模块:"file:///Users/deno/so-75953426/image3.png"。
  请检查文件路径。deno(no-local) */

type TypeofImage1 = typeof Image1;
   //^? type TypeofImage1 = string

可能相关:denoland/deno#17867

英文:

There's no way to suppress module-resolution-related diagnostic errors when using the Deno extension as a diagnostic provider in VS Code.

This is expected and useful behavior because Deno doesn't support what you're trying to do: although Deno supports custom ambient types when type-checking, it doesn't offer customizable module resolution apart from import maps — and (at least currently — as of Deno v1.32.3) there's no scenario where Deno can resolve an import of an actual PNG file.

You might ask yourself at this point — does it make sense to use the Deno extension to provide compilation diagnostics for an esbuild module graph?

I interpret the question to mean that what you really want is to override Deno's Language Server to imitate the custom content type loader features of esbuild — and, currently, that's not possible.

This leaves two workarounds:

  1. Disable the Deno extension for your workspace and create a custom vanilla TypeScript environment with the desired tooling setup — Deno typesambient types, module resolution, linting, formatting, etc. (Diving into all of these details is far out of scope for any single Stack Overflow answer — this would be several separate questions.)

  2. Use the Deno extension, and configure a custom import map for your workspace which has a mapping for every custom file import specifier to a declaration file describing its exports. This import map should only be used in the workspace to satisfy Deno's LSP — not during actual compilation with esbuild. I'll provide a basic example of that below:

Configure the extension to use a custom import map:

./.vscode/settings.json:

{
  "deno.enable": true,
  "deno.importMap": "./custom_file_import_map.json"
}

Create an entry for every custom file import specifier that points to a declaration file describing the exports:

./custom_file_import_map.json:

{
  "imports": {
    "./image1.png": "./custom_file_base64_image.d.ts",
    "./image2.png": "./custom_file_base64_image.d.ts"
  }
}

Create a declaration file for each custom file type — here's an example for PNG files that will be imported as base64 strings in esbuild:

./custom_file_base64_image.d.ts:

declare const base64Image: string;
export default base64Image;

After configuration, you will be able to use the custom file specifiers in import statements without complaint (and they'll have the correct types that you declared), but attempting to import custom files outside of the import map will continue to produce diagnostic errors:

./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


Potentially relevant: denoland/deno#17867

huangapple
  • 本文由 发表于 2023年4月7日 04:15:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75953426.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定