脚手架开发的一些细节(一)

894 阅读3分钟

脚手架的一些名词

vue create vue-demo --force -r https://registry.npm.taobao.org
  • 主命令 vue
  • 子命令 create
  • 命令参数 vue-demo
  • 配置选项 force / r
  • 配置选项的参数(如果为给定默认为true)https://registry.npm.taobao.org

image.png

分析vue-cli脚手架执行原理

输入vue create vue-demo

  • 解析vue命令
  • 在环境变量中查找vue命令。which vue
  • 根据查找到的vue路径连接到实际的vue.js文件。
  • node执行vue.js文件
  • vue.js中解析command / options
  • vue.js执行command

分析vue-cli安装三连问

  1. 为啥全局安装@vue/cli后会添加的命令为vue?

因为@vue/cli项目的package.json中的bin属性下指定了脚本命令名称。安装@vue/cli后,会分析该文件,并在node/bin目录下创建对应命令的软链接。

  1. 全局安装@vue/cli时发生了啥?

将项目下载到node/lib/node_modules中,如果有脚本命令将在node/bin目录下创建对应的软链接。

  1. 执行 vue 命令时发生了啥?为啥 vue 指向一个 js 文件,我们却可以直接通过vue命令执行它?

在环境变量中查找是否有该命令,没有则报错。在js文件开头加上#!/usr/bin/env node即可直接通过命令执行js文件。他主要是告诉终端,去/usr/bin/env(环境变量目录)中查找node命令去执行js文件。

npm包下载细节

如果在当前本地包目录下全局下载该包,那么下载的包在lib/node_modules下会软连接到本地包项目。而不是下载的npm仓库的包。就类似于执行了npm link

脚手架本地调试流程

将本地开发库连接到全局node/lib/node_modules下。注意:需要在本地库文件夹内进行npm link

npm link

在当前项目中引入本地开发库。

npm link your-lib

如果直接link本地包到该项目,将会报错,所以需要先全局link。

image.png 将本地开发库从全局中移除

npm unlink -g your-lib

开发流程需要注意的是,我们在本地测试完毕后,需要将本地link的全局包删除,这样才能下载发布后的包进行测试。

项目管理工具lerna

lerna 是一个优化基于git + npm 的多package项目的管理工具。

优势

  • 大幅减少重复操作。
  • 提升操作的标准化。

lerna是架构优化的产物,他揭示了一个架构真理:项目复杂度提升后,就需要对项目进行架构优化。架构优化的主要目标往往就是以效能为核心。

lerna创建脚手架项目

lerna init

创建子包,注意为了防止包名被注册,我们可以先在npm中创建一个组织。包名命名成@mh-cli/core

lerna create core

为所有pacakge安装依赖,并在对应的package中的package.json中写入依赖的版本号。

lerna add <libname>
// 如果需要再指定子包中安装命令,需要加上子包路径
lerna add <libname> packages/a

删除包中的node_modules。但是packages.json中的依赖版本没有删除,我们需要手动删除。

lerna clean

image.png 为packages中的包安装相互依赖,而不需要进入对应的包目录进行npm link <libname>但是需要先在dependencies中添加本地包依赖。

lerna link

如果需要重新link,需要先通过lerna clean删除node_modules,然后在执行lerna link

lerna clean
lerna link

执行每个包中脚本命令。

lerna exec <任何命令>
lerna run <packages中定义的命令>

changed与diff

lerna changed // 查看哪些包发生变更,然后需要发布
lerna diff // 查看两次commit的差异

修改版本号。当项目提交仓库后,发布前,需要更改version

lerna version

发布出现402错误,我们需要在package.json中加入。因为加了@前缀的包默认是private的,要在package.json中改变一下publishConfig。 image.png


publishConfig: {
    access: "public"
}

如果我们未发布成功,我们需要手动改动版本号

image.png