超好用的React集成脚手架,快来试试吧

吐槽君 分类:javascript

自建脚手架地址,觉得好用的话欢迎点个✨:
github.com/ericlee33/c…

效果图
超好用的React集成脚手架,快来试试吧

背景

  • 由于最近公司内,立项了多个不同业务,项目之间相互独立,但底层架构相似,从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来创建不同需求的模板)
  • 提供保存配置的功能

image.png
image.png

create-react-app的缺点

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

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

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

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

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

npm install --save react-router-dom
 
yarn add react-router-dom
 

社区有没有现成方案呢?

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

image.png

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

开始自制脚手架

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

技术栈

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

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

项目目录

tree -I '*.git|*node_modules*'
 
.
├── 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后,在这里执行变量注入与模板渲染等逻辑

  1. 注入每种不同模板项,从其 /lib/promptModules/${name} 增加不同的prompts
  2. 执行inquirer
  3. 根据用户所选项,拼接package.json
  4. 注入模板所需的ejs变量,通过ejs进行模板渲染,不同的配置项最终会生成不同的react-app项目模板
  • /lib/promptModules/

inquirer注入不同的prompts选项

  • /lib/generator

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

  • /utils

工具

  • /templates

componentsviews模板注入

未来优化项

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

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

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>

超好用的React集成脚手架,快来试试吧
超好用的React集成脚手架,快来试试吧

Usage 使用方法

快速搭建项目

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

  • Redux
  • React-Router (可选择History, Hash模式)
  • Linter / Formatter (目前提供了Eslint + EditorConfig + Prettier + CommitLint)
快速创建Page、Component模板

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

Features 功能介绍

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

回复

我来回复
  • 暂无回复内容