通过vue-cli源码学习脚手架

调试 vue-cli 源码

先克隆代码 git clone https://github.com/vuejs/vue-cli.gitvue-cli 是用 lerna 管理的多package项目。

所以需要先将lerna下载到全局,或者使用 npx 非常方便

npx在不全局安装某些包的情况下,直接运行该包提供的命令行工具,如果已经本地已经存在依赖,直接调用本地的,没有会自动下载安装,使用后自动删除。

执行 npx lerna bootstrap ,它会给我们的lerna项目下载依赖,下载依赖完成,接着切换路径 cd package/@vue/cli ,可以看到下面的 package.json 文件的 bin 出现了 vue 命令,还记得我们之前用vue create 创建项目吗? 然后把这个项目使用 npm link 发布到本地进行调试

如果npm link出现下面的错误 可以切换node@16.13.1试试

*检查npm link是否成功

找到node的位置 mac: which vue window: where vue

cd到node下的node_modules/@vue,执行 mac: ls window: dir 查看文件

可以看它是一个软链接,指向的就是我clone下来的文件地址

开始调试 找到bin/vue.js 找到create command,在action添加一行 console.log打印项目名。

现在使用 create 命令

可以看到它打印了我们的项目名,并且告诉我们的项目名不应该包含大写字母。

如果我们要写一个脚手架需要一些 第三方库 的支持

第三方库

commander

可以用来为脚手架注册命令,看看 vue-cli(bin/vue.js) 是怎么使用的

js 复制代码
const program = require("commander");

program
  .version(`@vue/cli ${require("../package").version}`)
  .usage("<command> [options]");

下面具体看看 注册一个命令(command) 需要哪些配置。

举个全面一点的例子

js 复制代码
const program = require("commander");

program
  .version(`@vue/cli ${require("../package").version}`)
  .usage("<command> [options]")
  .command("create <name> [addition]")//注册create命令
  .description("create a new project")
  .option("-f, --force [name]", "overwrite target directory if it exist")
  .action((name, addition, opt) => {
    console.log(name, addition, opt);
  });

现在执行 zdzli create project -f 123

打印 project undefined { force: '123' }

执行 zdzli create project -f

打印 project undefined { force: true }

command里的参数默认不传是undefined,option不传默认是false

如果用户输入的命令拼写错误,我们应该提示它正确的拼写,这个时候就需要 program.on,它的作用是监听命令和选项可以执行自定义函数。看 vue-cli 的实现

js 复制代码
// output help information on unknown commands
program.on("command:*", ([cmd]) => {//监听任何未知命令
  //program.outputHelp();//相当于执行vue --help
  console.log(`  ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`));
  console.log();
  suggestCommands(cmd);//查找存在的类似单词的方法
  process.exitCode = 1;//退出程序
});

suggestCommands 方法我比较好奇是怎么实现的,看到里面引用了第三方库 leven,原理是使用Levenshtein 距离算法测量两个字符串之间的差异。这个算法也叫 编辑距离 在力扣中可以找到,以后有时间可以尝试一下。

另外现在打印自己的 脚手架名字 -h,Usage 后面默认是index,怎么改成自己脚手架的名字呢,只需要加上 program.name('zdzli(自己脚手架的名字)')

最后还需要执行 program.parse(process.argv);,至此 bin/vue.js 下的代码差不多都能看懂了。

下面主要就是学习create命令的执行流程了!!!!!!!!!

这个文件(bin/vue.js)里还有统一了错误处理 (不感兴趣可以略过)

点进去看到 enhanceErrorMessages 模块 导出了一个方法

里面重写了 program.Command原型方法 ,打断点调试果然发现这几个名字的函数在原型上都有

相关推荐
Myli_ing9 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风12 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave19 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟21 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾42 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架