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

关于脚手架

• 脚手架又被成为 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文件，把它打开

• 以上就是整个脚手架的一个架构

脚手架对前端工程的意义

• 今天前端可以发展的这么好，效率那么高，和脚手架的流行有莫大的关系
• 前端工程化流程，包括从项目创建、启动、构建流程等等都需要具备脚手架知识
• 脚手架是解决复杂前端工程问题的必备知识
• 所以，脚手架可以助力前端研发全流程提效

总结

• 命令行操作方式的效率很高，非常适合执行前端任务
• 最常用的场景，就是利用脚手架实现前端研发提效
• 如 npm i 解决依赖下载和安装问题
• 今日之前端发展，和脚手架流行有莫大关系
• 前端工程化: 项目创建、项目启动，项目构建流程