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

分析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安装三连问
- 为啥全局安装
@vue/cli后会添加的命令为vue?
因为@vue/cli项目的package.json中的bin属性下指定了脚本命令名称。安装@vue/cli后,会分析该文件,并在node/bin目录下创建对应命令的软链接。
- 全局安装
@vue/cli时发生了啥?
将项目下载到node/lib/node_modules中,如果有脚本命令将在node/bin目录下创建对应的软链接。
- 执行 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。
将本地开发库从全局中移除
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
为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。

publishConfig: {
access: "public"
}
如果我们未发布成功,我们需要手动改动版本号
