javascript - 无法在 React 和 TS 中使用 Parcel 找到 svgs Assets

Question

我已将 parcel 添加到使用 typescript 模板的 create-react-app 项目中。我正在尝试按照 their docs 的建议将 svgs 添加到我输出的 js 文件中.我不确定在 TS 中是否需要做一些不同的事情，但我按照他们的 JSX 代码片段的建议设置了我的项目，但它没有用:

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  }
}

注意:我已将转换器插件添加到我的开发部门。

组件.tsx

import BriefcaseSvg from "jsx:../../assets/briefcase.svg";

// ...later in my return statement:
<img src={BriefcaseSvg} alt="work icon" />

// I've also tried
<BriefcaseSvg/>

每次我收到以下错误:

无法解析依赖项“jsx:../../assets/briefcase.svg”

我也尝试过将 jsx 声明转换为 tsx。

我在 CRA 提供的标准 webpack 构建工具之上添加了 parcel。 wepback没有问题，显示刚刚找到的图标。当我不包含此 svg 插件但在其自己的文件中单独输出 svg 时，Parcel 也能够运行构建。

我希望一切都在一个 js 文件中结束。如何使用 parcel、react 和 TS 实现这一点？

Answer 1

默认的包裹配置定义了一个 svg 转换器和优化器，它们没有正确解析导入。您可以在 GitHub 上关注此问题 https://github.com/parcel-bundler/parcel/issues/7587 .

作为解决方法(对于任何类型的导入)，您不需要导入转换器。

在导入中用“url:”替换“jsx:”，如下所示:

import BriefcaseSvg from "url:../../assets/briefcase.svg";

并使用 src 属性，而不是组件。

<img src={BriefcaseSvg} alt="work icon" />

您可以在 https://github.com/parcel-bundler/parcel/pull/4055 阅读更多关于语法的信息.它仅适用于 JS，旨在支持导入未明确支持的文件。