步骤

  1. 克隆一个react-scripts
  2. 修改package.json
    1. name改成我们自己的项目名称
    2. 修改repository下的url为我们自己的仓库地址
    3. 修改bugs为我们自己仓库的issues地址
  3. 添加.gitignore文件 
  1. # dependencies
  2. node_modules
  4. npm-debug.log*
  5. yarn-debug.log*
  6. yarn-error.log*
  8. .vscode/
  1. 创建远程仓库，提交到git上
  2. 增加my-template目录，提供自己的项目模板，并修改init.js，加载自己的项目模板
  3. 修改webpack.config.js，扩展构建和本地开发的支持
    1. stylus-loader支持和resolve.alias扩展名别名
  4. 扩展项目模板，提供一些自定义功能
  5. 发布到npm上

调试

0. 说明

cra支持我们自定义react-scripts和template，来定制脚手架。

一般情况下，我们的react-scripts和template都是配套的，当然也可能一个react-scripts对应多个template。

我们开发好自己的react-scripts后，可以发布到git远程仓库或者发布到npm上，就可以使用create-react-app命令，用--scripts-version参数指定我们的react-scripts，就能生成一个我们自己的脚手架了。

下面介绍下如何本地调试我们自己的react-scripts

1. 使用本地react-scripts创建脚手架步骤

  1. 首先从create-react-app仓库中克隆一个react-scripts项目，放到本地，比如放到/demo目录下。（或者克隆一个create-react-app项目，然后把react-scripts目录复制出来）。修改目录名为my-react-scripts。
  2. 在my-react-scripts中做一些改动，比如将paths目录中的构建目录改为dist（cra的react-scripts的目录是build）
  3. 然后拼接出file协议下的本地my-react-scripts目录file:///demo/my-react-scripts/
  4. 执行命令npx create-react-app myapp --scripts-version file:///demo/my-react-scripts

这样就可以生成一个由我们本地的my-react-scripts构建出来的项目了。

进入myapp目录，运行npm run build可以看到输出目录已经变成了dist。

2. 开发react-scripts步骤

我们可以在myapp中进行打包和本地开发的调试，在node_modules中找到”my-react-scripts”在其中修改构建相关的代码，然后npm run build或者npm start查看效果。调试好之后，将改动的代码拷贝到my-react-scripts中。

我们也可以在myapp中进行模板的开发，比如添加状态管理、路由、工具库；指定目录结构等，然后myapp目录去掉node_modules目录后就可以作为template写到my-react-scripts中。再修改my-react-scripts中的init.js脚本，指定模板为我们自己的模板，这样就可以push到远端了。