起因
大部分项目的技术栈,引用的组件库,工具库等,以及整体的项目框架都是一致的,每次新开一个项目,都要做N次的CV,影响效率不说,也不优雅。如何让这个过程变得简洁而又优雅呢?毫无疑问,我们需要一个自定义的脚手架,而我们的脚手架需求也很简单,就是把我们写好的模板代码拉下来就行啦。
实现一个通用的项目模板
具体实现的项目模板因人而异,这里提供一个自己实现的 vue + typescript 的项目作为参考:
vue-typescript-template
实现脚手架
- 新建一个文件夹,执行
npm init
- 在 package.json 中新增语句
"bin": {
"vt-cli": "index.js"
}
- 安装相关依赖
npm install commander child_process --save
- 新建 index.js 放入以下代码
#! /usr/bin/env node
const program = require('commander');
const { exec } = require('child_process');
program.version('1.2.0', '-v, --version').command('init <name>').action((name) => {
console.log('clone template ...');
exec('git clone https://github.com/minteliuwm/vue-ts-template.git ' + name, function (error, stdout, stderr) {
if (error !== null) {
console.log('exec error: ' + error);
return;
}
console.log(stdout);
console.log('clone success');
});
});
program.parse(process.argv);
- 发布
npm publish
- 安装测试
npm i --global custom-vt-cli
vt-cli -v
vt-cli init project_test
一个简单的脚手架就这么实现了,具体代码参照 custom-vt-cli,走过路过别忘了来个star哟~