要想实现定制化模板开发,那就先要搞清楚工具本身的模板是如何实现的。


cra-template

cra-template 是create-react-app工具的模板包,当我们执行 npx create-react-app xxx时,在xxx目录下会生成src、public两个文件夹。这两个文件夹便是我们cra-template包的内容。

create-react-app 拷贝模板原理:

  • 在run函数中通过getTemplateInstallPackage获取模板包名称(cra-template),并把其push到allDependence中,通过install方法去安装allDependence;所以在create-react-app中只是安装了cra-template包,并未做拷贝模板的操作。
  • 拷贝模板的操作是在react-scripts/scripts/init.js中执行的。

    image.png

  • 拷贝模板的实现代码

    截屏2020-04-30下午11.15.56.png

  • 移除cra-template的包的实现代码

    截屏2020-04-30下午11.17.52.png
    截屏2020-04-30下午11.18.11.png

    cra-template 拷贝模板原理流程图

    cra-template.png