前端架构: 脚手架在前端研发流程中的意义

关注

原创 2024-02-21 22:31:12 1.1k 阅读 AI 写同款· GEO 优化 ›

从0搭建前端脚手架详解（小白也可以搭建）先来看一眼实现的效果。从图上来看这个脚手架的功能非常的简单只有一个创建的命令，其他都是帮助和显示版本号的。也就是上图这句，创建一个新项目，只需要输入create 项目名便可使用，在创建时执行了一系列的操作，这一块的思路很简单，就是将git仓库中的项目模板拷贝下来再依据使用者的不同操作对复制下来的模板的部分文件进行修改就可以了，大致思路便介绍到这里，接下来我们便来详细的讲讲如何实现，以及会用到的依赖。脚手架就是在启动的时候询问一些简单的问题，并且通过用户回答的结果去渲染对应的模板文件，我们接下来的流程亦是如此阅读详情

关于脚手架

脚手架又被成为 CLI (command-line interface)
基于文本界面，通过中断输入命令执行
常见的脚手架：npm, webpack-cli, vue-cli
拿 npm 这个脚手架来说
- 在终端当中输入 npm 命令, 系统就会通过文本方式返回 npm 的使用方法
- 它这种通过命令行执行的操作方式效率很高，所以非常适合用来执行前端任务
- 在前端开发的过程中，常常会把脚手架应用在前端研发提效当中
- 举一个的例子， $ npm install, 它就解决了依赖下载和安装问题
  - 如果不使用这条命令，就不得不从package阶层当中，把所有的依赖都读取一遍
  - 然后到npm的网站上，把这些依赖以及依赖的依赖全部下载下来
  - 下载后，要进行解压，并把这些依赖都拷贝到 node_modules 目录下
  - 还要把这些依赖中相关脚手架拷贝到 .bin 目录下
  - 这样才能完成整个 npm install 的一个过程
- 如果是这样，通过手动的方式来完成，它的复杂度和工作上是不可想象的

对脚手架的一些深入了解

脚手架有一些高级特性
- 比如，在命令行中一些特殊显示，如像颜色字体的显示样式
- 还有如何去做命令行的交互
脚手架的最佳实践，如何实践
- 通过开源源码库的阅读，可以研究并实现各种前端的高级特性, 设计模式和算法
- 各类设计模式在实际的开发过程中到底是怎么应用的

开发脚手架必备

1 ) 概述

因为是前端开发，最适合的底层环境就是 nodejs
- 需要掌握 node 开发，根据脚手架开发需求，需要了解 nodejs
- node 中内置库, 常用库, 各种命令行
- 如何处理键盘输入，键盘监听，文本颜色，命令行交互等
同时，要开发一款脚手架离不开 shell, bash, cli 等操作系统的基础知识
这些是掌握脚手架开发离不开的底层原理

2 ） nodejs

为什么要使用 nodejs 来开发脚手架，开发脚手架有很多语言都能够实现
- 比如python, java, ruby …
2.1 开发方面的支持

nodejs 支持 javascript 和 typeascript 这两种非常强大的开发语言
正因为有这两种语言的知持，使我们的脚手架开发过程会变得非常的舒适
nodejs 具备一个非常强大的生态，这个生态能够支持我们快速的去开发一个脚手架
nodejs 它提供了一个非常强大的内置库，而且其更新的速度非常的快，稳定度也非常的高
内置库当中提供了很多，比如像文件管理fs, 路径查询path, 操作系统os, 还有包括对进程管理的child_process等等
非常多的一个内置库的知识，能够让我们对一些基本的功能，操作系统基本功能的应用有一个支持
nodejs 还具备非常强大的三方库, 这个三方库有 npm 来进行托管
已经有超过一千一百万的开发者在使用 npm,
这些三方库可以帮助我们快速的去搭建起来这个脚手架
比如我们最常见的脚手架开发框架 commander 和 yargs，下载量都是非常惊人的
还有包括我们对内置库中的一些扩展 fs-extra, rxjs做响应式等等这些库数量巨大的一个三方库
基本上可以说，开发过程中能够想到需要用什么样的内容，它就能够提供什么样的能力

2.2 nodejs 还提供了一个非常强大的 npm 和 yarn 等包管理系统
- 这个系统可以帮助我们快速完成整个脚手架，从开发发布到更新整个流程
- 我们创建一个脚手架的时候，可以通过 $ npm init 快速的完成项目的一个创建
- 开发过程中可以借助 npm scripts 实现开发过程的调试
- 发布过程通过 $ npm publish 可以快速的推到 npm 的远程系统
- 最后，通过 $ npm install 把它安装到本地项目，或者说进行全局安装，在操作系统中进行使用
- 整个过程可以说是非常流畅的, 如果没有npm的话，整个过程都需要我们自己实现这个过程就比较痛苦了
- npm 其实在这个过程中帮我们做了非常多的事情，包括全局的一些自定义链接的软链接的生成等等
- 所以 nodejs 可以说是我们开发脚手架非常好的一个帮手

简单总结

js 和 Ts 强大的语法特性
nodejs 强大生态支持cli快速开发
- 内置库：fs, path, os, child_process, …
- 三方库：commander, yargs, fs-extra, rxjs, …
nodejs 强大的 npm 和 yarn 等包管理系统，可快速完成cli发布和更新
- 创建: $ npm init
- 开发: npm scripts
- 发布: $ npm publish
- 应用: $ npm install

3 ）如何快速落地脚手架的开发

找到脚手架的一个应用场景，树立应用脚手架的信心
深入的去了解操作系统与脚手架相关的一些基础知识
这其中就包含了 shell, bash, cli 这三者其实是一个递进关系
研究脚手架开发的一个底层原理，就脚手架，它到底是怎么实现的？怎么运行起来的?
- 今天用了nodejs, 明天就可以用 python 和 ruby
- 都是一样的道理
确定使用 nodejs 来开发脚手架
就需要根据脚手架需求去了解nodejs的内置库，常用的三方库以及脚手架框架
除此之外，还要掌握各种命令行特有的能力的开发方法
- 比如说如何进行键盘的输入
- 如何监听键盘输入过程中各种行为
- 如何改变控制台当中的文本颜色
- 如何进行命令行交互等等
- 这些都是在命令行开发，也就是脚手架当中特有的一些开发方法
最后，基于这些基础知识和nodejs的开发方法去开发一系列的提效工具，解决实际开发过程中的一些具体的问题

4 ) bash 和 shell

shell 是计算机提供给用户和其他程序进行交互的接口
shell 是一个命令解释器，当你输入命令后，由 shell 进行解释后交给操作系统内核 (OS Kernel) 进行处理
- 比如一个花生，花生壳就是shell, 花生粒就是 Kernel
- 图形操作系统属于 shell，属于 GUI Shell
- 花生壳就是壳应用，可以是 GUI的，可以是命令行的
- 比如 mac 的 Finder

bash 是 shell 的一种类型，可查看系统上有几种类型

cat /etc/shells

/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/tcsh
/bin/zsh

bash 就是一种程序，用于人机交互，它不是完成特定任务的，如计算器，文件管理器等
通过 bash shell 来执行程序，比如 ls, 和 cd 都是由bash来实现
bash 使用了一种纯文本的控制台进行控制，主要交互方式是通过键盘输入文本，文字反馈来实现人机交互
gui如火如荼的今天，bash并没有过时，在bash 前端开发领域越来越广泛
bash的最大优势是简单易用，效果不如 GUI，但一旦熟练后期操作效率远远大于 GUI

5 ） CLI

command line interface
基于文本界面，用于运行程序
可调用操作系统的接口
接受键盘输入, 基于Unix系统会同时提供cli和gui

6 ） 架构层次图

sortware 这是最上层
- cli software
- gui software
shell 这是中层
- cli：bash, csh, zsh, dash
- gui
os kernel 这是最底层，系统内核
最底层是我们操作系统的内核，就是我们的操作系统
我们通过 shell 和操作系统内核来进行交互
shell 有两种形式，一种形式叫做 CLI, 一种叫做 GUI
- CLI 表示命令行, GUI表示图形界面
- 在 CLI 中有很多实现，比如 bash, csh, zsh, dash
我们自己开发的这个程序软件 Software分为两种: CLI Software, GUI Software
- CLI Software 主要运行在 CLI 环境当中，在终端中它没办法直接启动，必须要通过一个shell程序去启动
- 比如说这使用bash 或 csh 运行它
- 而 GUI 的这个软件，其实也可以通过 CLI 来把它打开，也可以在图形操作系统中, 比如在Windows里面通过.exe文件，把它打开
以上就是整个脚手架的一个架构