node_03_创建脚手架

//1.创建index.js
//2.生成package.json文件:npm init -y
//3.在package.json里面添加
"bin":{
"why":"index.js"
}
//4.index.js的最顶层
#! /usr/bin/env node;//在当前电脑环境里面找到node的指令,找到node的可执行文件,用node来执行当前index.js的文件
//5.在项目的终端执行命令 npm link 做一个链接,将命令配置到项目,然后在终端输入命令why就可以执行index.js
//6.安装commander库 npm install commander
//7.在index.js里面引入
const program=require('commander')
//定义version指令的值1.0.0
program.version('1.0.0');
//解析终端命令传入的参数,必须加
program.parse(process.argv)
//8.终端执行 why --version 打印出1.0.0 
//9.这样子的话version就是固定值,我们需要从package.json里面引入动态值
program.version(require('./package.json').version) 这个时候终端执行 why --version 打印出来的就是package.json的值了
//10.终端测试命令发现:why -V可以作为version的简写,我们如果需要why -v的话需要加上定义参数,但是会将原来的大写给覆盖了
program.version(require('./package.json').version,'-v,--version')
//11.增加自己的options
program.option('-w --why','a why cli');
这个时候再去终端输入命令why --helo查看帮助会有Options:-w --why  a why cli ,但是这个命令目前没有意义。
//12.增加真正的options
program.option('-d --dest<dest>','a destination folder,例如:-d/src/components ')
终端输入命令:why -d /src/components;终端只要写上-d就必须要传入参数,不写-d则不用
console.log(program.dest)//打印出/src/components
13.program.on('--help',funtion(){
	console.log('')
	console.log('监听终端命令')
})
14.要对目录结构进行划分,在根目录新建lib,在lib里新建core和utils文件夹,
在core文件夹里面新建help.js文件
15.//help.js
const program=require('commander')
const helpOptions=()=>{
	//增加自己的options
	program.option('-w --why','a why cli')
	program.option('-d --dest <dest>','a destination folder,例如: -d /src/components')
	program.option('')
}
program.on('--help',function(){
	console.log('')
	console.log('监听终端命令')
})
module.exports={
	helpOptions
}
//index.js
const proaram=require('commander')
const helpOptins=require('./lib/core/help')
//帮助和可选信息
helpOtions()
16. 实现npm create demo指令创建项目,在core里面新建create.js文件
//createjs
const proaram=require('commander')
const createCommand=()=>{
//action函数是用户命令行执行的回调
//command创建指令create,<project>是要写的项目名
	program.command('create <project> [others...]').description('clone repository into a floder').action((project,others)=>{
	console.log(project,others)
	})
}
module.exports=createCommands;
//index.js
const paoaram=require('commander')
const helpOptins=require('./lib/core/help')
const createCommands=require('./lib/core/create')
//帮助和可选信息
helpOtions()
//创建其他指令
createCommands()
17.我们在corv文件夹下面新建一个actions,之后我们所有的指令的回调函数都封装到这里,用CommonJS规范导出

创建项目指令

  • 创建解析create指令
  • 通过download-git-repo从代码仓库下载模板
  • 进入目录,并且执行’npm install’命令
  • 执行’npm run serve’命令
  • 打开浏览器
18.在lib文件夹新建一个config文件夹,在config文件夹新建一个repo-config.js文件
let vueRepo="direct:https://github.com/coderwhy/hy-vue-temp.git"
nodule.exports={
	vueRepo
}
19. 在lib文件夹下新建utils文件夹,在utils文件夹下新建terminal.js封装执行终端命令相关的代码
//termunal.js
//导入child_process实现开启进程
const {spawn}=require('child_process')
const commandSpwn=(...args)=>{
 return new Promise=((resolve,reject)=>{
	const childProcess=spawn(...args);
	childProcess.stdout.pipe(process.stout)
	childProcess.stderr.pipe(process.stout)
	childProcess.on('close',=>{
		resolve();
	})
})
}
module.exports={
	commandSpwn
}

20.在actions写指令的回调函数

const download=promisify(require('download-git-repo'));
const {vueRepo}=require('../config/repo-config');

const {commandSpwn}=require('../utils/terminal')
const createProjectAction=async(project)=>{
	//1.clone项目
	  await download(vueRepo,project,{clone:true});
	//2.执行npm install win系统要npm.cmd,不然会报错
	const command=process.platform==="win32"?"npm.cmd":"npm"
	await commandSpwn(command,['install'],{cwd:`${project}`})
	
	//3.运行npm run serve
	//4.打开浏览器
}
module.exports={
	createProjectAction
}
//create.js
const proaram=require('commander')
cosnt {createProjectAction}=require('./actions');
const createCommands=()=>{
//command创建指令create,<project>是要写的项目名
	program
	.command('create <project> [others...]')
	.description('clone repository into a floder')
	.action(createProjectAction)
}
module.exports.exports=createCommand
21.命令行执行 why create proJectname
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值