发布基于lottie-react-native的RN组件库后组件不显示如何排查

• TS默认仅处理.ts/.tsx文件，既不会识别JSON模块导入，也不会把assets目录下的Lottie动画JSON文件拷贝到编译输出的lib目录
• 本地通过软链/file:协议安装组件库时，运行环境直接读取源码目录的资源，因此功能正常；从GitHub安装时拉取的是发布的编译产物，缺失JSON资源时lottie-react-native会静默加载失败，无运行时报错但组件无法渲染
• 未开启JSON模块解析配置时，TS编译生成的.d.ts类型文件会保留对JSON文件的导入语句但找不到对应类型声明，直接触发类型报错，就是你定位到的index.d.ts异常

1. 修正TS编译配置 #

打开项目根目录tsconfig.json，补充JSON模块解析相关配置：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "outDir": "./lib"
    // 其余原有编译配置保留即可
  },
  "include": ["src/**/*", "src/**/*.json"]
}

2. 补充静态资源拷贝流程 #

TSC本身不会拷贝非代码类资源到输出目录，需要在构建流程中加一步资源复制：

• 安装跨平台拷贝工具：npm i cpx -D
• 修改package.json中的构建脚本，保证编译后资源路径和源码导入路径一致：

{
  "scripts": {
    "build": "tsc && cpx \"src/assets/**/*\" lib/assets/"
  }
}

3. 修正包发布配置 #

检查package.json中的入口和发布文件配置：

• 入口配置指向编译产物：

  {
    "main": "./lib/index.js",
    "types": "./lib/index.d.ts"
  }
  

• files字段包含全部编译产物，避免发布时遗漏资源：

  {
    "files": ["lib/**/*"]
  }
  

4. 本地验证产物后再发布 #

执行npm pack生成本地发布包，解压后检查：

• lib目录下是否存在assets文件夹，对应的Lottie JSON文件是否完整
• lib/index.d.ts是否已经没有JSON模块导入的类型报错
  验证通过后再推送到GitHub，重新安装即可正常显示加载器组件。

注意：不要直接把源码目录的assets加入发布列表，否则会出现编译后JS文件引用路径和资源实际路径不匹配的问题，所有运行时需要的资源都要跟随编译产物放到lib目录下。

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