对 CSS/图像资产使用 Webpack 时，Typescript 编译器“找不到模块”

Posted 2023-03-13

【中文标题】对 CSS/图像资产使用 Webpack 时，Typescript 编译器“找不到模块”

【英文标题】：Typescript compiler "cannot find module" when using Webpack require for CSS/image assets

【发布时间】：2018-01-08 00:47:38

【问题描述】：

我正在编写 vanilla Javascript，但使用 Typescript 编译器的 checkJs 选项在 VSCode 中进行类型检查。我已将 Webpack 设置为加载各种资产类型（CSS、图像等），这对于构建效果很好，但 Code 将这些语句视为错误。例如，在这段代码中

require("bootstrap");
require("bootstrap/dist/css/bootstrap.css");
var img = require("../img/image.png");

第一行很好，但接下来的两行都在require() 的（字符串）参数下显示错误，工具提示“找不到模块（名称）”。

我已经安装了@types/webpack 和@types/webpack-env，修复了resolve() 和resolve.context()。我是否错过了另一个类型包，或者这是我需要在the DT issue tracker 处理的问题？

【问题讨论】：

你可以让它工作，但你必须创建一个类型声明文件。没有办法使用 vanilla JS 来表达资产合成模块。

您能否提供一个链接来说明如何执行此操作？我不太了解 Typescript，我只是想利用类型检查，但我不想用//@ts-ignore 乱扔代码，所以我试图“正确”修复它

【参考方案1】：

支持 VS Code 的 javascript 和 TypeScript 智能感知的 TypeScript 服务器目前不支持需要非 JS 或 TS 资源。这是跟踪此问题的问题：https://github.com/Microsoft/TypeScript/issues/15146

作为一种解决方法，请尝试在您的项目中创建一个 d.ts 文件，其中包含以下内容：

declare module '*.css'  export default '' as string; 
declare module '*.png'  export default '' as string; 

您还可以通过在 require 前添加 // @ts-ignore 来抑制个别错误：

// @ts-ignore
var img = require("../img/image.png");

【讨论】：

我到处都有@ts-ignores，但最好有一个更一致的默认行为。谢谢！

我可能说得太早了——我现在看到的是[js] Type 'typeof '*.svg'' is not assignable to type 'string'.。但我正在导出“作为字符串”——什么给出了？ （您的示例确实消除了 require("path/to/whatever.css") 的错误，因为返回值从未分配给任何东西。）

现在，这很有趣。正如您所建议的，我在globals.d.ts 中添加了许多declare module 行。将 require("path/to/my.svg") 分配给 string 类型的 var 会出现“不可分配”错误，但 import mySvg from "path/to/my.svg"; aStringVar = mySvg; 效果很好。也许我在require() 中发现了一个错误？现在，我正在将所有需要更改为导入，因为 Webpack 显然可以很好地处理它们。