Typescript - 如何将 png 文件导入到我的 Typescript 文件中？

Question

我使用 Parcel 编译器建立了自己的打字稿项目，并让所有内容都在内置服务器上运行。我实现了 pixi.js 并希望将 .png 文件导入到我的 .ts 文件中。但是当我尝试导入时，它说找不到该模块，即使这两个文件位于同一文件夹中？我缺少什么？

我尝试执行以下操作

npm install @types/node --save-dev

tsconfig.json（位于我的根文件夹中）

{
  "compilerOptions": {
    "types": ["node"],
    "typeRoots": ["node_modules/@types"]
  }
}

Answer 1

据我从你给出的例子中猜测，这与 Parcel 没有任何关系。

Parcel v1 将在内部调用tsc，编译器将简单地针对未知文件扩展名（如 ）发出错误.png，因为纯 TS 项目只能在不涉及 Parcel 或 Webpack 等模块捆绑程序的情况下对import文件（.js、.ts、.tsx或.jsx）进行编码.json。

捆绑器import通过将其他文件类型转换为可在项目中使用的有效模块来允许使用其他文件类型（由 Webpack 中的加载器实现，Parcel 确实更透明地处理它）。

为了“说服”编译器这些类型的导入是可以的，并且为了使模块已知，可以使用通配符模块声明。例如，要使.png文件导入编译，您可以globals.d.ts使用以下声明创建一个文件或类似文件：

declare module '*.png';

这应该足以满足编译器的要求（这是一个 Parcel 特定的相关问题）。

希望能帮助到你。