关于前端脚手架

兔子公主
109 阅读3分钟

vue create vue-test-app 命令输入后，终端做了什么处理

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

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

这里以vue-cli为例

  1. 开发npm项目，该项目中应包含一个bin/vue.js文件，并将整个项目发布到npm
  2. 将npm项目安装到node的lib/node_modules
  3. 在node的bin目录下配置vue软链接指向lib/node_modules/@vue/cli/bin/vue.js 这样我们在执行vue命令的时候就可以找到vue.js进行执行

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

image.png

全局安装@vue/cli时发生了什么

  1. 将依赖下载到指定的lib/node_modules目录下
  2. 配置bin的软链接

包的命名为什么是@vue/cli

@vue是group name,这样可以避免cli重复，所以设置一个上级组织

执行vue命令时发生了什么？为什么vue指向一个js文件，我们却可以直接通过vue命令直接去执行它

  1. 环境变量中vue命令是否有被注册
  2. js文件里面添加了环境变量

为什么说脚手架本质是操作系统的客户端？它和我们在PC上安装的应用/软件有什么区别？

  1. 脚手架本质执行起来是依赖node命令，node是操作系统客户端，vue.js仅仅是node的一个参数，仅仅是把参数注入到node当中，

如何为node脚手架命令创建别名

  1. 使用软链接

描述脚手架命令执行的全过程

脚手架开发流程详解

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

使用流程

  1. 安装脚手架
npm install -g your-own-cli
  1. 使用脚手架
your-own-cli

脚手架开发难点解析

  1. 分包：将复杂的系统拆分成若干个模块
  2. 命令注册：
vue create
vue add
vue invoke

还有很多，比如：

  1. 命令行交互
  2. 日志打印
  3. 命令行文字变色
  4. 网络通信：HTTP/WebSocket
  5. 文件处理。。。

脚手架本地link标准流程

链接本地脚手架：

cd your-cli-dir
npm link

链接本地库文件：

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

取消链接本地库文件

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

理解npm link:

  1. npm link your-lib 将当前项目中node_modules下指定的库文件链接到node全局node_modules下的库文件

  2. npm link 将当前项目链接到node全局node_modules中作为一个库文件，并解析bin配置创建可执行文件

理解npm unlink:

  1. npm unlink: 将当前项目从node全局node_modules中移除
  2. npm unlink your-lib：将当前项目中的库文件依赖移除
avatar
文章
阅读
粉丝