理解前端脚手架（一） |
您所在的位置：网站首页 › vue添加本地录音 › 理解前端脚手架（一） |
理解前端脚手架（一）
|
脚手架可以干啥？
不同的公司有不同的开发规范，并且通常也有自己内部的UI组件库，那么就需要一套脚手架工具来进行业务项目的一键初始化，接入公司内部的组件库、开发规范等。同时，脚手架工具还可以用来进行公司内部的前端物料创建、发布等操作。 接下来我将会从@vue/cli入手，用一系列的文章记录总结下自己对脚手架工具的探索过程。 终端命令是如何跑起来的在使用@vue/cli来初始化vue项目的时候，我们在命令行输入vue create，然后就可以在终端看见一系列的交互提示。 那么终端是如何识别用户输入、找到对应的逻辑并执行的呢？ 可执行文件 调试准备vscode 选择“Javascript 调试终端”， 此时 vscode 会打开内置的终端，并且提示 "Debugger attached" 接着在想要进行断点调试的文件中打上断点，并运行对应文件，就可以正常捕捉到断点了。 在@vue/cli/package.json中我们可以看到，有个bin字段： 在进行依赖安装时，npm会在node_modules/.bin文件目录下生成一个指向可执行文件bin/vue.js的符号连接。命令行执行vue命令时运行的逻辑就包含在此文件中。 vue是通过package.json中的bin字段注册的，那么create又是怎么识别的呢？ 命令注册可以看到，bin/vue.js中引入了命令行工具commander，通过.command()可以传入命令的名字、描述，.action()则是当执行命令时需要调用的回调函数。 const { program } = require('commander'); // 通过绑定处理函数实现命令（这里的指令描述为放在`.command`中） // 返回新生成的命令（即该子命令）以供继续配置 program .command('clone [destination]') .description('clone a repository into a newly created directory') .action((source, destination) => { console.log('clone command called'); });@vue/cli的create命令就是通过.action()中引入../lib/create模块并调用来实现的 在完成命令的注册后，回调函数将会保存到Commander实例的_actionHandler中 第二种注册命令的方式是通过可执行文件的方式实现命令。 // 通过独立的的可执行文件实现命令 (注意这里指令描述是作为`.command`的第二个参数) // 返回最顶层的命令以供继续添加子命令 program .command('start ', 'start named service') .command('stop [service]', 'stop named service, or all if no name supplied');vue/cli源码并没有用到这种处理方式，这里我们通过一个小例子来测试一下这种方式的命令注册及执行过程。 创建两个可执行文件放置于bin文件夹中，并利用npm link在node_modules/.bin文件夹下生成两个符号链接。这里生成符号链接的目的只是为了模拟命令的可执行文件查找过程，实际上直接在命令行输入可执行文件的路径也能正常执行。 此时我们打上断点后再在命令行中输入myVue create my-app进行调试会发现，在myVue.js进行参数解析时，会寻找传入的myVue是否有注册过对应create的子命令 接着解析参数my-app是否属于子命令，否，返回_dispatchSubcommand继续create子命令的执行。传入的create子命令会在可执行文件夹中查找是否存在可执行文件命令-子命令，即myVue-create 脚手架工具主要可用于本地开发过程中的业务项目一键初始化、公司内部物料组件初始化等。经过一系列的源码调试可得知，它的运行依赖于node环境可执行文件的执行。命令的注册可通过命令行工具库commander的.command()注册，命令对应的执行逻辑可通过.action()写入回调，也可以在可执行文件夹中将逻辑写入命令-子命令文件中。 接下来第二篇将会继续从源码角度理解总结脚手架工具是如何获取项目模板的，感谢阅读。 源码链接：commander vue-cli my-ci-test |
【本文地址】