前端脚手架进阶

2024-06-25 99 阅读2分钟

一.基本概念

1.为什么要使用node.js开发脚手架

2.什么是cli和Gui

cli是一种基于文本界面，用于运行程序，Gui图形界面运行程序。

3.脚手架架构原理

4.从使用角度理解脚手架

脚手架简介（脚手架本质是一个操作系统的客户端，它通过命令执行）

vue create vue-test-app --force -r https://registry.npm.taobao.org（此链接为-r的参数）
1.主命令：vue
2.command（子命令）:create
3.command的params(参数):vue-test-app
4.--force叫做option用来辅助脚手架在特定场景下用户的选择可简写：-f
5.-r也叫做option 其为简写，等同于 --registry

vue create --help 查看所有的命令

脚手架执行原理 输入 vue create vue-test-app 时执行原理

执行原理用文字描述
1.在终端输入vue create vue-test-app
2.终端解析出vue命令
3.终端在环境变量中找到vue
4.终端根据vue命令链接到实际文件vue.js
5.vue.js解析command/options
6.vue.js执行command
7.执行完毕，退出执行

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

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

二.脚手架基础

1.脚手架开发流程

1.创建 npm 项目 npm init
2.创建脚手架入口文件，最上方添加  #!/usr/bin/env node
3.配置package.json，添加bin属性
4.开发
    分包：当脚手架比较复杂时不可能把所有js代码写在一个脚手架中，此时要分包
    参数解析：一个命令不可能完成所有功能，此时需要参数辅助
5.调试（npm link）
6.发布（npm publish）

2.脚手架的使用流程

安装脚手架

npm install -g your-own-cli

使用脚手架

your-own-cli

3.框架搭建脚手架

提升脚手架开发效率，大幅提升脚手架命令的创建、修改的速度
简化脚手架开发过程，大幅提升代码的可读性和可维护性
常用的脚手架框架

1.yargs  
    周下载量 6000w+  
    案例： 
       - gulp-cli
2.commander
    周下载量 8000w+  
    案例： 
       - vue-cli
       - webpack-cli
       - create-react-app
3.oclif 
    脚手架生成器

4.脚手架开发难点

5.脚手架本地link标准流程

链接本地脚手架

cd your-cli-dir
npm link

链接本地库文件

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

取消链接本地库文件

cd your-cli-dir
npm unlink
cd your-cli-dir
npm unlink your-lib  link还存在时执行
rm -rf node_modules  移出node_modules
npm install

理解npm link