前端脚手架简介及基础知识摘录

前端架构脚手架

发布时间 : 2023-05-19 10:02

阅读 :

什么是脚手架
脚手架原理
1. 从应用的角度看如何开发一个脚手架
脚手架开发流程
脚手架调试
脚手架命令注册和参数解析

前端脚手架是一种用于构建 Web 应用程序的工具，它能够提供一些开发过程中常用的配置、目录结构、依赖库等，简化了开发过程，提高了开发效率。通过前端脚手架，开发者可以快速搭建起一个基本的开发环境，集成了各种必要的工具和插件，使得开发者可以专注于业务逻辑的实现，而不用花费过多时间在搭建环境和配置上。

什么是脚手架

在日常开发当中，我们经常使用这些脚手架工具来帮助我们创建脚手架项目。但是到底什么是脚手架，什么是脚手架工具，它解决的问题是什么，我们可能未必有很清晰的认识。
日常开发中常用都得vue-cli、crate-react-app以及angular-cli等，事实上并不是脚手架，它们只是用来创建脚手架的脚手架工具。那么什么是脚手架呢？
脚手架提供了一个基础工作平台，使得后续的工作人员能够更加规范便捷的进行工作。本质上是一个通过命令行执行的操作系统的客户端。如下面的代码,由3个部分组成

主命令 vue
command:create
command的参数：vue-test-app
表示创建一个vue项目，项目名称为vue-test-app。

vue create vue-test-app --force

上面命令行的--force叫option，用来辅助脚手架确认在特定场景下用户的选择。还有一种场景,通过vue create创建项目时，会自动执行npm install帮助用户安装依赖，如果希望使用淘宝镜像源，可如下:

vue create vue-test-app --force -r https://registry.npmmirror.com
# 这里的-r也叫做option，它与--force不同的是它使用-，并且使用简写，这里的-r也可以替换成--registry

前端脚手架基本组成部分包括以下几个方面：

预处理器插件（如babel或precss）：对输入的HTML或CSS进行预处理，生成符合Web标准的代码。
模板引擎（如Handlebars或Mustache）：将HTML或CSS模板与JavaScript代码分离，提高代码复用性和可维护性。
组件库（如Bootstrap或Materialize）：提供常用的UI组件，可以快速搭建界面。
工具链（如axios或winston）：提供便捷的API接口和调试工具。

脚手架原理

我们在使用react-create-app、vue-cli等脚手架工具搭建脚手架项目时，它会先询问一些问题，而后这些脚手架会根据这些问题的答案并结合它自带的项目模板创建出一个脚手架项目。简单描述这个过程就是，通过用户输入并根据模板文件内容，自动生成一个结果模板解析后的指定命名的文件。

通过创建vue项目进行讲解

在终端输入vue create vue-test-app
终端解析出vue命令
终端在环境变量中找到vue命令
终端根据vue命令链接到实际文件vue.js
终端利用node执行vue.js
vue.js解析command/options
vue.js执行command
执行完毕，生成vue项目，退出执行

从应用的角度看如何开发一个脚手架

开发npm项目，该项目中包含一个bin/vue.js文件，并将这个项目发布到npm
将npm项目安装到node的lib/node_modules
在node的bin目录下配置vue的软链接指向lib/node_modules/@vue/cli/bin/vue.js

通过以下几个问题理解脚手架实现原理：

为什么全局安装@vue/cli后会添加的命令为vue？

vue其实是一个软链接，指向了bin目录下的@vue/cli。全局安装是在bin目录下（bin表示可执行文件）
全局安装@vue/cli时发生了什么？

首先node把包下载至node_modules目录下；下载完成后解析package.json文件中的bin字段，接着在bin目录下创建一个软链接指向实际配置的文件
执行vue命令时发生了什么？为什么vue指向一个js文件，我们却可以通过vue命令执行它？

到环境变量中找到vue文件（通过软链接找到实际文件，然后执行它）。
能执行js文件是因为js文件里声明了#! usr/bin/env node即通过环境变量找到node命令执行。可通过软链接直接连向需要执行的文件，方便执行：ln -s /Users/xxx/Desktop/test.js Test，然后通过在命令行直接输入Test便可执行test.js文件
为什么说脚手架本质是操作系统的客户端，它和我们pc安装的软件/应用有什么区别？

其实node是个客户端，如node test.js，test.js只是node的一个参数。当通过node执行一个js文件的时候，其实是把js文件作为一个字符串解析后当作参数编译。脚手架执行过程是一样的，它和一般应用的最大区别就是，脚手架是通过命令行来执行的。
如何为node脚手架命令创建别名？

嵌套软链接即可给脚手架创建别名，如：进入bin目录后 ln -s ./vue vue2，即在软链接上再创建一个软链接
描述脚手架命令执行的全过程

脚手架开发流程

开发流程

创建npm项目
创建脚手架入口文件，最上方添加 #!/usr/bin/env node
配置package.json，添加bin属性
编写脚手架代码
将脚手架代码发布到npm

使用流程

安装脚手架
使用脚手架

脚手架开发难点

分包：将复杂的系统拆分成若干个模块
命令注册
参数解析

脚手架调试

理解npm link
- npm link your-lib:将当前项目中node_modules下指定的库文件链接到node全局node_modules下的库文件
- npm link：将当前项目链接到node全局node_modules中作为一个库文件，并解析bin配置创建可执行文件
理解npm unlink
- npm unlink：将当前项目从node全局node_modules中移除
- npm unlink your-lib：将当前项目中的库文件依赖移除
脚手架本地link标准流程
1. 链接本地脚手架

cd your/cli/dir
npm link

链接本地库文件

cd your/lib/dir
npm link
cd your/cli/dir
npm link yout-lib

取消链接本地库文件

cd your/lib/dir
npm unlink
cd your/cli/dir
# link存在
npm unlink your-lib
# link不存在
rm -rf node_modules
npm install -S your-lib

脚手架命令注册和参数解析

命令注册

const argv = require('process').argv;
const command = argv[2]; // 获取命令
const options = argv.slice(3); // 参数
let [option, param]=options;

参数解析

// 解析--version或-V
if(command.startWith('--')||command.startWith('-')){
  const globalOption = command.replace(/--|-/g,'');
  if(globalOption==='version'||globalOption==='V){
     console.log('1.0.0')
  }
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 chaoyumail@126.com