1.0.3 • Published 3 years ago

liudes-cli v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

脚手架发展过程

1.远古时代:手动创建前端三件套

2.石器时代:将项目模板代码托管到Git/SVN上,使用的时候先手动将代码拉倒本地

3.青铜时代:通过脚本,自动化做了一些事情:拉取项目模板、配置项目信息等

4.蒸汽时代:形成一套完整的命令行工具,比如vue-cli/create-react-app等

5.工业时代:在cra/vue-cli的基础上定制个性能力,接入自定义模板、自动化Git流程、数据采集等

6.现代:脚手架已经跳出终端(命令行),有了可视化、WebIDE等方案,通过更为方便的交互即可完成项目的初始化

为什么需要脚手架

帮助开发者更方便地初始化项目

1.提高效率

2.较低成本

常见脚手架底层方案

使用download-git-repo来下载模板代码 使用Yeoman作为脚手架的一个核心功能进行扩展

Yeoman提供一个插件体系,开发者可以自定开发插件来使用Yeoman的能力,这个插件在Yeoman中称为generators, 所有代码生成的能力都有generators提供

常见脚手架集成方案

Vue Cli

核心思想:
1.预设管理:在CLI内部通过统一的实例对prompt(终端交互)和preset(预设)进行管理,交互之前
存在互联关联层层递进的关系,在初始化的时候,这些用于终端交互的配置就初始化在内存中,根据用户的选择
触发不同的逻辑。

2.灵活的插件系统:在Vue CLI中使用了一套基于插件的架构,将CLI的逻辑和生成代码的逻辑解耦,通过
不同的插件去修改文件内容和配置,生成最终的代码

Vue CLI同时还提供了图形化界面对项目进行初始化、管理,这也是React App等CLI不同的地方

create React App

核心思想:
1.脚手架核心功能中心化:使用npx保证每次用户使用的都是最新版本,方便功能的升级
2.模板去中心化:方便地进行模板管理,也允许用户自定义模板
3.脚手架逻辑和初始化代码逻辑分离:CLI只负责核心依赖、模板的安装和脚手架的核心功能,而初始化代码的逻辑在
react-scripts包里执行

自定义模板

仿vue-cli搭建属于自己的脚手架

前置知识

commander 用来编写指令和处理命令行

inquirer 强大的交互式命令行工具

chalk 用来修改控制台输出内容样式

ora 好看的加载

download-git-repo 用来下载远程模板

参考资料: https://mp.weixin.qq.com/s/o7kt8IWZ0u07a2z0O573Ew

https://juejin.cn/post/6844904101893898248