从现有CRA项目打包组件库发布至NPM遇编译问题求助

问题本质 #

你直接把未编译的TypeScript/TSX源码发布到了NPM，而CRA项目默认不会对node_modules中的第三方包做TypeScript转译，webpack遇到TS语法（比如组件参数的类型注解({links}: FooterProps)）时无法解析，因此抛出解析错误。

解决步骤 #

• 编译组件代码再发布

  1. 在Components目录下创建tsconfig.json，配置TypeScript编译规则，确保生成编译后的JS文件和类型声明：

     {
       "compilerOptions": {
         "target": "ESNext",
         "module": "ESNext",
         "lib": ["DOM", "ESNext"],
         "jsx": "react-jsx",
         "declaration": true,
         "declarationDir": "./dist",
         "outDir": "./dist",
         "strict": true,
         "moduleResolution": "NodeNext",
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true
       },
       "include": ["./**/*"],
       "exclude": ["node_modules", "dist"]
     }
     

  2. 在该目录的package.json中添加编译脚本：

     "scripts": {
       "build": "tsc"
     }
     

  3. 执行npm run build生成dist目录，里面包含编译后的JS文件和.d.ts类型声明文件。
  4. 修改package.json的入口配置：

     "main": "./dist/index.js",
     "types": "./dist/index.d.ts"
     

  5. 创建.npmignore文件，排除未编译的源码和无关文件，只保留dist和必要配置：

     src/
     *.ts
     *.tsx
     tsconfig.json
     node_modules/
     

• 处理样式依赖
  如果组件使用了scss，建议预编译成css后打包（可以用Rollup配合rollup-plugin-scss插件），避免使用方额外配置SCSS loader。如果必须保留SCSS，需确保使用方项目已配置对应的loader。

• 本地验证
  发布前执行npm pack生成本地tgz包，安装到测试项目中验证编译运行正常，再执行npm publish。

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