使用esbuild加载SVG文件

Question

我使用电子与打字稿反应，并使用电子构建捆绑。

项目文件树：

projectname/
┣ assets/
┃ ┣ index.d.ts
┃ ┗ logo.svg
┣ src/
┃ ┣ components/
┃ ┃ ┗ Intro.tsx
┃ ┣ App.tsx
┃ ┣ electron.ts
┃ ┣ fonts.css
┃ ┣ index.css
┃ ┣ index.html
┃ ┗ index.tsx
┣ .gitignore
┣ build.js
┣ LICENSE
┣ package.json
┣ README.md
┗ yarn.lock

我试着使用，但是这个错误出现了。

找不到模块“esbuild”的声明文件。'd:/genius0412/github/checkaccess/node_modules/esbuild-plugin-svg/src/index.js‘隐式地具有“任意”类型。如果npm i --save-dev @types/esbuild-plugin-svg存在，可以尝试使用它，或者添加一个包含declare module 'esbuild-plugin-svg';ts的新声明(.d.ts)文件(7016)

此外，我尝试使用，但它也不起作用。

错误:无法解决“resolve”(插件"svgj“没有设置解析目录)

我该如何解决这个问题？

Answer 1

这是一个类型记录问题-它不知道是用什么类型导入的：

import logo from '../assets/logo.svg';

我看到您尝试用index.d.ts添加类型。由于索引文件是.tsx，我将尝试在index.tsx中手动导入d.ts --在某种程度上，我的印象是TS为.js文件自动导入d.ts，而不是为.ts导入d.ts

Answer 2

这就是对我有用的东西：

我加了

declare module '*.svg' {
    const content: string;
    export default content;
}

项目的declaration.d.ts文件。

然后在build.cjs中为SVG文件添加了一个加载程序：

build({
  ...
  loader: {'.svg': 'text'},
  ...
});