超好用的React脚手架，快来试试吧

自建脚手架地址，觉得好用的话欢迎点个✨：
https://github.com/ericlee33/create-compositive-react-app-cli

效果图

背景

由于最近公司内，立项了多个不同业务，项目之间相互独立，但底层架构相似，从0搭建新项目变成了很寻常的事情，当你一个事情做多了之后，就感觉到很难受，作为一个工具人，需要想办法解决掉这个问题。

当通过create-react-app创建项目模板之后，还需要删除掉一堆不需要的东西，安装很多框架生态链，Linter等依赖，完成install后，还要配置项目底层各种东西，很耗费精力和时间。

FB已经提供了create-react-app，为什么还要做react脚手架？

先谈谈vue-cli的优点

提供了可选配置项（由于Vue周边生态较为单一，官方提供的路由/状态管理方案只有一个，不像React生态光一个状态管理方案就有MobX、Redux-Saga、Redux-Thunk等等。。）
令人舒适的Inquirer界面（不像create-react-app，通过执行脚手架时，传入不同configuration来创建不同需求的模板）
提供保存配置的功能

create-react-app的缺点

在我看来，从0快速搭建项目的角度看，主要有以下几个问题

未提供可选react-router路由配置的模板
未提供状态管理Lib
没有提供Linter，Coding过程很不爽
一些工具库npm包中没有typing文件，需要手动去安装@types无法享受vscode利用@types文件在js中也提供代码提示的快感。

下面是官方文案提供的Router说明：

Create React App 并未规定特定的Router(路由)解决方案，但 React Router 是最受欢迎的 Router(路由) 解决方案。
要添加它，请运行：

或者你可以使用 yarn:
要尝试它，删除 src/App.js 中的所有代码，并将其替换为其网站上的任何示例。基本示例是开始尝试的好地方。
请注意，在部署应用程序之前，你可能需要配置生产服务器以支持客户端路由。

1	npm install --save react-router-dom

1	yarn add react-router-dom

社区有没有现成方案呢？

在 github 上搜索 react-scaffold 、react脚手架 ，很难在社区中找到一个完整满足自己需求的脚手架

可以看到搜索结果大多是Archived或无人维护的项目。

开始自制脚手架

为了解决以上create-react-app痛点，我决定仿照vue-cli，制作一个react的集成脚手架。

技术栈

为了更方便开发脚手架，我们需要以下node工具🔧

commander 命令行
inquirer 交互式命令
ejs 模板渲染
execa 子进程管理工具
chalk 用于输出带颜色的log
ora 可以在命令行展示spinning

项目目录

.
├── README.md
├── bin
│   └── index.js
├── commitlint.config.js
├── lib
│   ├── Creator.js
│   ├── Generator.js
│   ├── PromptModuleAPI.js
│   ├── config.js
│   ├── create.js
│   ├── defaultFeaturesPrompts.js
│   ├── generator
│   │   ├── linter
│   │   │   ├── index.js
│   │   │   └── template ...此处省略template文件
│   │   ├── react
│   │   │   ├── index.js
│   │   │   └── template ...此处省略template文件
│   │   ├── redux
│   │   │   ├── index.js
│   │   │   └── template ...此处省略template文件
│   │   └── router
│   │       ├── index.js
│   │       └── template ...此处省略template文件
│   ├── getPromptModules.js
│   ├── promptModules
│   │   ├── linter.js
│   │   ├── moduleConstantsName.js
│   │   ├── redux.js
│   │   └── router.js
│   ├── templates
│   │   ├── components
│   │   │   ├── index.jsx
│   │   │   └── index.module.scss
│   │   ├── config.js
│   │   ├── createTemplate.js
│   │   ├── templatePrompts.js
│   │   └── views
│   │       ├── index.jsx
│   │       └── index.module.scss
│   └── utils
│       ├── chalk.js
│       ├── copyDir.js
│       ├── executeCommand.js
│       └── isObject.js
└── package.json

项目总结

总结一下，主要是以下模块

/bin/index.js

命令行调用脚手架的入口
主要放置了commander命令

/lib/create.js

执行完在命令行输入的commander后，在这里执行变量注入与模板渲染等逻辑

注入每种不同模板项，从其 /lib/promptModules/${name} 增加不同的prompts

执行inquirer

根据用户所选项，拼接package.json

注入模板所需的ejs变量，通过ejs进行模板渲染，不同的配置项最终会生成不同的react-app项目模板

/lib/promptModules/

为inquirer注入不同的prompts选项

/lib/generator

React项目模板，每一种模板，要求了不同配置项，会根据用户选择，动态注入到最终生成的项目中

/utils

工具

/templates

components和views模板注入

未来优化项

ejs注入可选项不友好，比如为了动态在App.jsx入口中，根据用户所选配置项判断是否import React-Router、Redux等，v1版本目前是通过根据answers，使用Ejs来渲染的。未来这一块可以优化为通过修改文件的AST，来实现配置的注入，对模板的侵入性会更低。
后续需要在项目中加入Jest单元测试，保证脚手架后续迭代，对主流程功能不会造成影响。

如果大家想了解项目细节，后续我可以再写一篇关于项目中细节的文章。

自制React集成脚手架功能介绍

npm地址

npm源地址

Introduction 脚手架介绍

减少从0到1搭建项目的成本，快速开发项目
在create-react-app v4.0.3脚手架基础上，增加了如下项目配置可选项

React-Redux + Redux-Thunk + Redux-Logger
React-Router (可选择History, Hash模式)
Linter / Formatter （目前提供了Eslint + EditorConfig + Prettier + CommitLint）

完成模板创建后，自动安装依赖。

Getting started 快速使用

推荐使用 npx create-compositive-react-app-cli init <your project name>
也可使用 npm i -g create-compositive-react-app-cli ccra init <your project name>

Usage 使用方法

快速搭建项目

ccra init <name>
配置项有3种可选项:

Redux
React-Router (可选择History, Hash模式)
Linter / Formatter （目前提供了Eslint + EditorConfig + Prettier + CommitLint）

快速创建Page、Component模板

ccra create
可以在 CLI 中自行选择创建 Page 或 Component 输入 name 后即可完成模板自动创建

Features 功能介绍

一键快速创建Page组件
一键快速创建Components组件
在ccra init <name>进行初始化项目时，通过Inquirer库的功能，提供给用户各类可选项，可以根据用户所需配置，进行项目自动化构建。
- 注：状态管理暂时仅提供Redux模板
- 路由管理提供React-Router v5模板
自动安装所需要的@types文件，即便用户使用JavaScript进行开发，也能在vscode IDE下得到函数提示支持

背景