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

Wang's Blog

已于 2024-02-21 22:31:12 修改

阅读量722

点赞数 15

分类专栏： FE Architecture 文章标签：前端架构

于 2024-02-05 23:31:56 首次发布

本文链接：https://blog.csdn.net/Tyro_java/article/details/136049352

版权

FE Architecture 专栏收录该内容

84 篇文章 3 订阅

订阅专栏

本文探讨了脚手架在前端开发中的重要性，特别是npm作为常见脚手架的实例，强调了命令行接口（CLI）的高效性。文章介绍了为何选择Node.js开发脚手架，及其强大的生态系统、内置库和第三方库的作用。此外，还涉及了如何利用bash和shell进行基础操作，以及脚手架在前端工程中的实际应用和意义。

摘要由CSDN通过智能技术生成

关于脚手架

脚手架又被成为 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文件，把它打开
以上就是整个脚手架的一个架构