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

关于脚手架

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

对脚手架的一些深入了解

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

开发脚手架必备

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

1 ） 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

2 ) 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

3 ） CLI

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

4） 架构层次图

• sortware 这是最上层

  • cli software
  • gui software

• shell 这是中层

  • cli：bash, csh, zsh, dash
  • gui

• os kernel 这是最底层，系统内核

脚手架对前端工程的意义

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

总结

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