打造自己的vue项目脚手架工具

WHITELIE
884 阅读2分钟

主要步骤

  1. 创建文件夹，建立一个js文件(这里命名为index.js),输入你想执行的js代码，注意顶部必须加入Node开发命令行工具声明:#!/usr/bin/env node
  2. 终端输入 npm init -y 创建package.json

举个栗子：我想输入'voe'就执行index.js文件，我需要干什么呢？

  • 第一步，在package.json加入"bin":{"voe":"index.js"}
  • 第二步，终端输入npm link,全局注册，这样电脑任何目录输入‘voe’就可以执行index.js文件了
  1. 安装commander: npm install commander commander网址,
  • 在index.js引入commander,const {program} = require('commander)

举个栗子：想要通过命令行实现gitee仓库的下载（我这里用的是码云，在你的gitee仓库中建几个测试仓库模板）

  • 第一步，需要下载依赖download-git-repo,npm install download-git-repo,然后index.js中引入它const download = require('download-git-repo')

  • 第二步，将你新建的仓库模板地址和下载地址写入index.js

  • 第三步，就可以下载你需要的模板啦。这里我在gitee创建的其中一个模板名为tpl-a,下载后模板命名为aaa，终端输入 voe init tpl-a aaa, 完整代码最后附上

  1. 安装模板引擎 handlebars，npm install handlebars并在index.js引入 这里编译package.js文件
const packageContent = fs.readFileSync(`${projectName}/package.json`,'utf-8') 
const packageResult = handlebars.compile(packageContent)(answers)
  1. 安装向导 inquirer npm install inquirer 并引入，在tpl-a模板中创建package.json 文件，设置你想向导的内容，我这里设置了3个，tpl-a 模板中的package.json内容如下：
{
  "name": "{{name}}",
  "version": "1.0.0",
  "description": "{{description}}",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "{{author}}",
  "license": "ISC",
  "bin": {
    "hnz": "index.js"
  },
  "dependencies": {
    "commander": "^5.1.0",
    "download-git-repo": "^3.0.2"
  }
}

最后效果如下图所示，出现了设置的向导

  1. 接下来是不是要将向导时自己输入的内容读写进去呢？那就要引入依赖 fs了，
const fs = require('fs')
... ...
//把采集到的用户输入的数据解析替换到 package.json 文件中
const packagePath = `${projectName}/package.json`
const packageContent = fs.readFileSync(`${projectName}/package.json`,'utf-8')
const packageResult = handlebars.compile(packageContent)(answers)
fs.writeFileSync(packagePath, packageResult)
... ...

读写成功后，voe init tpl-a kkk 下载模板成功打开package.json文件就会有所不同啦~

最终代码如下：

#!/usr/bin/env node

// 使用node开发命令行工具所执行的 Javascript 脚本必须在顶部加入 #!/usr/bin/env node 声明

//1.获取用户输入命令

//原生获取

const { program } = require('commander')
const download = require('download-git-repo')
const handlebars = require('handlebars') //模板引擎
const inquirer = require('inquirer') //向导
const fs = require('fs')

program.version('0.1.1') // -v 或者 --version的时候输出该版本号

// voe innit a a-name  基于a项目进行初始化
// voe innit b b-name  基于b项目进行初始化
const templates = {
	'tpl-a': {
		url: 'https://gitee.com/beth_work/tpl-a',
		downloadUrl: 'https://gitee.com:beth_work/tpl-a#master',
		description: 'a模板',
	},
	'tpl-b': {
		url: 'https://gitee.com/beth_work/tpl-b',
		downloadUrl: 'https://gitee.com:beth_work/tpl-b#master',
		description: 'b模板',
	},
}

program
	.command('init <template> <project>')
	.description('初始化项目模板')
	.option('-s, --setup_mode [mode]', 'Which setup mode to use')
	.action(function (templateName, projectName) {
		//根据模板名下载对应的模板到本地并起名为 projectName
		console.log(templates[templateName])
		const { downloadUrl } = templates[templateName]
		//download
		//第一个参数：仓库地址，第二个参数：下载路径
		download(downloadUrl, projectName, { clone: true }, (err) => {
			if (err) {
				return console.log(err ? err : 'Success')
			}

			//把项目下的 package.json 文件读取出来
			//使用向导的方式采集用户输入的值
			//使用模板引擎把用户输入的数据解析到 package.json 文件中
			//解析完毕，把解析之后的结果重新写入 package.json 文件中
			inquirer
			.prompt([
			/* Pass your questions in here */
				{ type: 'input', name: 'name', message: '请输入项目名称' },
				{ type: 'input', name: 'description', message: '请输入项目简介' },
				{ type: 'input', name: 'author', message: '请输入作者名称' },
			])
			.then((answers) => {
			    // Use user feedback for... whatever!!
			    //把采集到的用户输入的数据解析替换到 package.json 文件中
		            const packagePath = `${projectName}/package.json`
			    const packageContent = fs.readFileSync(`${projectName}/package.json`,'utf-8')
			    const packageResult = handlebars.compile(packageContent)(answers)
			    fs.writeFileSync(packagePath, packageResult)

			    console.log('初始化模板成功')
			})
			.catch((error) => {
			if (error.isTtyError) {
				// Prompt couldn't be rendered in the current environment
			} else {
				// Something else when wrong
			}
		})
	    })
	})

program
	.command('list')
	.description('查看所有可用模板')
	.action(() => {
		for (let key in templates) {
			console.log(`${key} ${templates[key].description}`)
		}
	})

program.parse(process.argv)

视觉美化部分

  1. ora & chalk & log-symbols

npm 发包，让所有人都可以是用你的模板啦~

npm install -global voe-cli

1.注册npm账号 2. npm网站搜索是否有重名的包名，这里我命名为voe-cli 3. 将package.json中的name改为你自己的包名（voe-cli）

ps:这个命名跟本地项目名称无关哦

  1. 打开终端输入：npm login登录npm
  2. 登录成功后执行 npm publish
    ps:这里碰到了坑，原因有：
  • 你的npm账号没有在终端登录；
  • 邮箱未验证；
  • 你的npm设置了淘宝镜像

检查仓库是否被设成了淘宝镜像库 npm config get registry,如果是， 如是，则设回原仓库 npm config set registry=http://registry.npmjs.org

  • 发布成功后设回原淘宝镜像 npm config set registry=https://registry.npm.taobao.org/

过几分钟就可以在npm中搜索到你的包啦

愉快的下载玩耍吧：npm i --global voe-cli

avatar
文章
阅读
粉丝