react cli
写在前面，一个不想造轮子的搬砖工不是好的程序汪！
一 为什么会有造 react cli 的想法
受困于每次新开项目，不论项目大小，都得重新搭建，无疑是劳民伤财、效率低下的苦差事。
想到当前流行的框架react、vue、angular都有各自的cli，虽然以上的cli，足以解决市面上大部分场景问题，但是由于公司内部项目的特殊性，需要更多个性化的配置，故有了做react cli的决定。
二 要解决的问题
- 支持react
- 支持react、react-router
- 支持react、react-redux
- 支持react、react-router、react-redux
- 支持react、react-router、react-redux、typescript
- 支持react-hooks(待定)
三 最终要完成的形态
-
所有开发、测试、生产打包的指令集中封装在一个全局变量里面，类似于
react-scripts，执行react-scripts start，就可以启动项目进行开发；执行react-scripts test，就可以进行代码测试等等； -
支持不同的需求的项目，每个需求都对应的配置模板，放置在不同的目录中。
-
全局安装指令中，可以指定安装对应的模板，升级对应的模板。
四 如何开始
先放个大招，show出整个项目的目录结构，猜猜各自的功能是什么？😁
1. 准备好模板文件
目前提供了两套模板，一套是纯 react（不包括router、redux、typescript），一套是整合了 react 全家桶 + typescript（即是 react+react-router+react-redux+typescript）,主要放置在 template 目录中，前者是 default 项目，后者是 typescript 项目。
2. 完成cli脚本
在完成 cli 脚本前，需要知道什么是 cli ？
Wikipedia给出的解释是这样滴
命令行界面（英语：Command-Line Interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（character user interface, CUI）。
说人话就是对着那个黑黑的窗口（终端）敲命令，然后输出你想要的东西，仅此而已。
早期的计算机也就如此，只不过为了普通人都能轻松使用它，便有了GUI，做的最好的莫过于现在的windows，哈哈，扯远了。。。
好戏开场了
如何让项目成为可执行？
关键部分 package.json 给出答案，需要在该文件中指定bin选项，这样就可以做到内部命令指定可执行文件的位置，是不是很神奇。
在package.json里面添加
"bin": {
"start-react-project": "index.js"
},
如何做到按提示安装想要的模板？
首先解释下，package.json将会安装以下的依赖
“chalk” - 控制台字符样式 “commander” - 接收命令参数输入 “conf” - 持久化插件 “cp-file” - 拷贝文件 “execa” - 调用shell和本地外部程序的javascript封装 启动子进程 “globby” - 匹配文件目录 “handlebars” - 模板解析 “inquirer” - 提示输入 “make-dir” - 文件夹创建 “ora” - 命令行loading “p-each-series” - 迭代器
在package.json设置的bin选项指定到index.js,
index.js 的内容为
#!/usr/bin/env node
'use strict';
require('./lib/cli');
cli.js 文件主要做的事情有：
- 接收命令行参数
- 处理命令行参数
- 处理提示参数
- 创建目标文件夹及其文件
其中第三点主要通过 prompt-params.js 去做 第四点交由 create-project.js 去做
npm link (发布后用npm i -g start-react-project)
做完以上部分，可以在当前目录，执行 npm link, npm link 作用:
在本地开发 npm 模块的时候，我们可以使用 npm link 命令，将 npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试
在本项目中，我们可以通过其来验证 cli 功能的完整性。
打开终端，执行start-react-project，输入相关信息，可以看到
执行
cd && yarn start
就可以看到项目运行起来了
3. cli项目发布到npm
在 `package.json` 设置
```
"main": "index.js"
```
执行
```
npm publish
```
`npm` 发布相关教程，可以看我之前发布的文章
[npm 包制作发布](http://franki.sevenyuan.cn/2018/10/npm%E5%8C%85%E5%88%B6%E4%BD%9C%E5%8F%91%E5%B8%83%E5%88%9D%E4%BD%93%E9%AA%8C/)
总结
cli 制作大致流程就是准备模板-编写脚本-发布，具体使用参考start-react-project