create-react-app项目tsc构建未包含SVG资源，如何配置解决？

问题本质 #

tsc（TypeScript编译器）仅负责编译TypeScript/JavaScript代码，不会处理、复制SVG这类静态资源——这就是你用tsc --project tsconfig.dist.json构建后，dist目录里找不到SVG文件的核心原因。而npm start依赖react-scripts的webpack配置，webpack会自动处理静态资源的打包和复制，所以本地运行正常。

解决方案 #

1. 手动复制SVG资源到dist目录 #

通过npm脚本配合文件复制工具，在tsc编译完成后将SVG资源同步到dist。

• 安装跨平台复制工具copyfiles：

  npm install copyfiles --save-dev
  

• 在package.json的scripts中添加复制命令和整合后的构建命令：

  {
    "scripts": {
      "copy-assets": "copyfiles -u 1 src/assets/**/* dist/",
      "build-dist": "tsc --project tsconfig.dist.json && npm run copy-assets"
    }
  }
  

  执行npm run build-dist即可完成编译+资源复制。

  解释：-u 1表示忽略源路径的第一层（即去掉src/前缀，把src/assets/下的内容直接放到dist/assets/）

2. 修复SVG的TypeScript类型识别 #

针对你用到的import { ReactComponent } from '../assets/disconnected.svg'语法，需要配置类型声明让TS识别这种导入方式：

在src目录下创建svg.d.ts类型声明文件：

declare module '*.svg' {
  import React from 'react';
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

确保你的tsconfig.json或tsconfig.dist.json中包含了这个声明文件：

{
  "include": ["src/**/*"]
}

3. 替代方案：用esbuild替代纯tsc构建 #

如果需要更一体化的构建流程，可以用esbuild（轻量快速的构建工具），它能同时处理TS编译和静态资源复制：

• 安装esbuild：

  npm install esbuild --save-dev
  

• 添加构建脚本到package.json：

  {
    "scripts": {
      "build-esbuild": "esbuild src/index.tsx --bundle --outfile=dist/index.js --loader:.svg=file"
    }
  }
  

  根据你的项目入口文件调整src/index.tsx，--loader:.svg=file会将SVG作为文件资源处理，复制到dist并生成正确的导入路径。

总结 #

纯tsc只是TS代码编译器，不是完整的前端构建工具，静态资源需要额外的步骤处理。通过资源复制脚本+类型声明，或者换用支持静态资源的构建工具，就能解决SVG缺失的问题。

内容的提问来源于stack exchange，提问作者patman