NPM发布cra-template使用时文件夹结构未复制问题排查
问题背景
开发NPM平台的自定义cra-template模板时,本地通过file:./cra-template-[mytemplate]路径方式测试,所有文件、文件夹结构均可正常复制,无异常;模板正式发布到NPM后,执行npx create-react-app my-project --template [mytemplate]命令基于该模板创建项目,仅零散文件可正常安装,预设的文件夹结构未被复制。
当前模板目录结构如下:
template | |--src | |--api |--components ...(其余目录省略)
核心原因
本地file引用模式下,CRA直接读取本地磁盘的全量目录内容,不会经过npm包的打包筛选逻辑,空目录、未被ignore规则匹配的内容都能被正常读取。
发布到npm的包会经过npm内置的打包规则校验,三类常见问题会导致文件夹丢失:
- 空目录不会被npm打包进发布的包中,如果你预设的
api、components等目录初始没有存放文件,发布时会被直接跳过。 - 目录层级不符合CRA模板规范,从给出的结构看,
api、components和src平级放在template目录下,如果你预期这两个目录属于src的子目录,层级错误也会导致生成项目时对应路径下找不到文件夹。 - 未在
package.json的files字段明确声明要包含的模板内容,部分目录被.npmignore/.gitignore规则过滤,没有被打包进最终发布的npm包。
修复步骤
- 先校正目录层级:
template目录下的所有内容会被直接复制到生成项目的根目录,如果api、components属于源码目录,需要移动到template/src/路径下,不要和src平级放置。 - 给所有初始为空的预设文件夹添加空的
.gitkeep文件,让npm识别到该目录存在有效内容,发布时会保留完整目录结构。 - 在模板包根目录的
package.json中添加files配置,明确声明需要发布的内容,避免被忽略规则误删,参考配置:
{ "files": [ "template", "template.json" ] }
- 正式发布前,在模板项目根目录执行
npm pack命令生成本地tgz压缩包,解压后检查包内的目录结构是否完整,确认所有文件夹都被正确打包后再执行发布操作,不要仅依赖本地file引用的测试结果。
内容的提问来源于stack exchange,提问作者Jean-François Handfield
相关产品推荐
相关产品推荐

