以文字形式记录在实践过程中的输出。
自定义终端的过程
首先创建一个文件夹,命名为mini-cli。并在文件夹中创建一个index.js文件。进入mini-cli文件夹的终端,输入npm init -y命令,执行生成一个package.json文件。
通常情况下,我们要执行index.js文件,在node环境下可以在mini-cli文件夹下的终端输入node index.js命令,会打印输出相应的内容。
但是,如果我们不想使用node,自己想用自定义的命令该如何操作呢?
在index.js文件的最上方,输入这一行代码 #!/usr/bin/env node
来到package.json文件下,新增配置项
"bin": {
"lxb": "index.js"
}
lxb是自定义的命令,要想在node环境下执行,需要将它和环境关联起来,在终端输入命令 npm link
最后尝试在终端执行lxb命令就会执行index.js
version/help/options
在终端命令行中,输入node -v,node --help会输出相应的消息。如果想要在命令行中输入lxb -v或lxb --help也有相应的输出,需要引入第三方commander包作辅助。 github上有相对应的文档介绍:github.com/tj/commande…
在终端命令行npm i commander安装commander。
在index.js文件导入commander,并定义相对应的版本号。
这时候在终端上输入lxb --version,终端命令没有任何提示,因为还缺少解析终端指令。
再次在终端输入lxb --version查看结果:
接下来继续完善help和option,在根目录创建一个lib文件夹,在其文件夹下创建一个core文件夹,在core文件夹下编写核心功能,在core文件夹下创建一个help.js文件,实现其help和option核心功能helpOptions并导出:
回到index.js文件,导入helpOptions并执行
在终端执行lxb --help
创建项目和启动
平常我们在使用脚手架创建脚手架的时候,如创建vue-cli的时候,常用vue create xxx来创建项目。同理创建自己的脚手架也需要类似的命令。在core文件夹下创建一个create.js文件来实现。
.command()的第一个参数为命令名称。命令参数可以跟在名称后面。.description()里的参数为描述内容。.action()接收一个回调函数,里面包含相关句柄的处理。
在index.js文件下导入createCommands并执行。
在createCommands方法中,有多种指令,每种指令对于的action()接收的回调函数不同,为了区分和维护,在core文件夹下创建一个actions.js文件来存放不同的action回调。
在actions.js定义一个createProject()方法用来创建项目指令。在这里需要额外的第三方包download-git-repo来作辅助,因为需要从github上clone一个项目。在终端执行npm i download-git-repo下载安装。
在lib文件夹下我们创建一个config文件夹,来存放配置文件。在config文件夹下创建一个repo_config.js文件,定义导出vue模板的配置github链接。
在download-git-repo的npm官网上有对应的例子直接下载url格式:
在action.js文件,在实现createProject()方法会遇到多种回调,为了避免这种情况,我们采用async await异步的方法。先从node的工具函数中导出promisify方法,在down-git-repo导入downloadRepo方法的用promisify()进行一层包裹,这样一来就可以在createProject中采用async await方法。
downloadRepo()方法接收的参数分别为github项链地址,项目名称以及配置项,在npm上有对应的文档。
到这里,在新的目录文件夹下测试一下结果,在test文件夹的终端内输入指令 lxb create vue-demo
可以看到成功地将模板拉取下来了。
模板拉取下来后,要实现安装package.json中的依赖,即执行npm insatll命令。在lib文件夹下创建一个utils文件夹,在utils文件夹下新建一个terminal.js文件。在terminal.js文件实现终端命令操作。
关于spawn相关的文档:nodejs.cn/api/child_p…
spawnCommand方法接收的参数不确定,采用es6的...拓展运算符传入。来到action.js文件 将spawnCommand方法导入并执行。对于第一个参数传递的值在windows平台和其它平台不一样,虽然在windows平台命令行执行npm操作,其内部是执行npm.cmd,所以参数要做区别判断。
当执行完npm install之后,浏览器要自动打开,需要安装一个第三方包作辅助。在终端安装命令npm install open,导入并在8080端口执行。
浏览器打开完毕之后,执行脚本命令npm run serve(因为是vue-cli模板),执行spawnCommand方法,传入对应的参数:
创建组件/页面/store模块指令
在平常的项目中,我们创建一个文件通常都是在相应的目录下新建对应的文件。如果想要在终端下使用指令创建,该如何实现呢? 简单地可以概括为以下几个步骤:
- 有对应的ejs模板
- 编译ejs模板
- 编译后的模板写入到.vue文件或.js文件
- 将.vue文件或.js文件存放到对应的文件夹
在lib文件夹下创建一个template文件夹存放对应的ejs文件
在lib文件夹下的utils文件夹下创建一个file.js文件来处理文件相关的逻辑。因为涉及到ejs模板文件,所以需要安装ejs第三方包。在终端命令行执行npm install ejs
ejs相关文档链接:ejs.bootcss.com/#docs
定义一个ejsComplie方法,将ejs进行编译,templatePath为编译模板路径,data和option分别是参数和选项。
定义一个创建文件夹的mkdirSync方法,这里需要判断文件夹是否存在,还涉及到文件夹层级问题,需要用到递归。需要用到node自带的fs和path方法。
定义一个写入文件的writeFile方法,参数为写入路径和写入内容
最后定义一个将ejs编译成文件的handleEjsToFile方法并导出,关于参数会在后面说明。
回到core文件下的actions.js文件下,导入handleEjsToFile方法,并分别定义添加组件,添加页面,添加store模块的方法。
handleEjsToFile方法中涉及到ejs模板的路径,我作了箭头指向。分别将这几个方法一一导出。
来到core文件夹下的create.js文件把addComponent,addPage,addStore导入。
在之前的createCommands方法添加创建组件指令,创建页面指令,创建store模块指令
好了,到这里总体的流程都走完了。在之前创建的vue-demo文件下测试一遍。
命令行添加组件
在终端命令行输入lxb addcpn NavBar -d src/components后会在src/components文件夹下新建一个NavBar.vue文件
在action里头回调函数name参数的实参就是NavBar,program.dest实参就是src/components。
命令行添加页面
在终端命令行输入lxb addpage mine -d src/pages后会在src/pages文件夹下新建一个mine文件夹,包含mine.vue文件和自身的路由文件。
在action里头回调函数name参数的实参就是mine,program.dest实参就是src/pages。
创建store模块指令
在终端命令行输入lxb addstore shoppingcart -d src/store/modules后会在src/store/modules文件夹下新建一个shoppingcart文件夹,包含index.js文件和自身的types.js文件。
在action里头回调函数name参数的实参就是shoppingcart,program.dest实参就是src/store/modules。
大体的思路就是这样了。
完结!!!