使用TSC处理JS版React Native库时，如何将本地图片纳入dist目录？

TypeScript编译器（tsc）仅处理代码类文件（.js/.ts/.d.ts等），不会自动复制图片这类非代码资源，所以需要额外添加资源复制步骤，以下是几种可行方案：

方案一：使用copyfiles工具批量复制 #

1. 安装开发依赖：

npm install copyfiles --save-dev

2. 在package.json的scripts中添加编译+复制的组合命令：

"scripts": {
  "build": "tsc && copyfiles -u 1 src/Images/**/* dist/"
}

• -u 1 参数用于移除源路径的第一层目录（确保src/Images下的文件直接输出到dist/Images，而非dist/src/Images）

方案二：原生命令复制（无需额外工具） #

如果不想安装第三方工具，可利用系统原生复制命令，通过postbuild钩子在编译完成后自动执行：

"scripts": {
  "build": "tsc",
  "postbuild": "cp -r src/Images dist/ || xcopy src\\Images dist\\Images /E /I"
}

• cp -r 适用于Mac/Linux系统，xcopy ... /E /I 适用于Windows系统，|| 实现跨平台兼容

补充：确保图片类型声明正确 #

为避免tsc处理图片require语句时报错，需在declaration.d.ts中添加图片模块声明：

declare module '*.png' {
  const value: any;
  export default value;
}

关于之前Solution#4无效的说明 #

Stack Overflow的Solution#4大概率是针对TypeScript源码项目的配置，而tsc本身不会识别并复制非代码资源，因此仅靠调整tsconfig.json无法解决图片复制问题，必须配合资源复制脚本。

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