什么事脚手架
随着前端的快速发展，现在前端开发越来越工程化，高效，稳定，可维护成为开发者更加关注的重点，脚手架在这期间应运而生。这个概念特别贴切，简单来说“前端脚手架”就是通过简单的几个选项快速搭建出项目的基本结构代码，这里面以命令行方式为主要方式。 当然脚手架不只是前端才有，大量的Nodejs工程也有许多优秀的脚手架。
背景
当我们准备开发一个新项目的时候，开始的第一步就是要搭建好项目的基本结构代码， 以Vue项目为例，用的最多的命令应该就是它的官方脚手架:
Vue Create xx官方的脚手架只为你搭建了最基础的代码结构，创建好之后，你可能需要自己添加更多，例如更多的依赖包，prettier，eslintrc，.env, 或者一些常用的目录结构，api，store，router 等等，那么下一个项目开始又要重做一遍上面的事情，获者从第一个项目中复制， 那么这时我们就可以通过自制脚手架把这些重复的工作一次性解决。
关键步骤
1、首选我们要有一个适合你们团队的标准的项目项目模版
package.json中项目名称修改成{{name}}, 后面脚手架创建项目时可以动态修改
......
"name": "{{name}}",
......2、一个Github账号或者Gitee账号,将你的项目上传上去，设置成public
操作略
3、创建脚手架项目
创建一个空文件夹 x-cli 这是一个Nodejs项目， 进入目录，通过npm init 初始化项目，产生一个package.json配置文件
npm initpackage.json
{
"name": "x-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}在package.json中添加脚手架命令
......
"bin": {
"x-cli": "index.js"
},
......在package.json中添加项目依赖，并安装(npm install)
......
"dependencies": {
// 控制台会有彩色的字体
"chalk": "^3.0.0",
// 命令行辅助
"commander": "^4.1.1",
// 下载github项目
"download-git-repo": "^3.0.2",
// 模版工具
"handlebars": "^4.7.3",
// 命令行交互
"inquirer": "^7.0.4",
// 日志内的符号
"log-symbols": "^3.0.0",
// 命令行中加载状态标识
"ora": "^4.0.3",
},
......编写核心代码index.js, 基本逻辑：
- 通过commander创建一个create命令
- 输入项目名称，
- 选择模版(如果只有一个模版可以跳过此步骤)，下载模版，
- 修改项目(package.json)名称
const program = require('commander'); //设计命令行
const download = require('download-git-repo'); //github仓库下载
const inquirer = require('inquirer'); //命令行答询
const handlebars = require('handlebars'); //修改字符
const ora = require('ora'); //命令行中加载状态标识
const chalk = require('chalk'); //命令行输出字符颜色
const logSymbols = require('log-symbols'); //命令行输出符号
const fs = require('fs');
const package = require('./package.json');
const version = `x-cli cli v${package.version}`;
const templates = {
'v3e': {
downloadUrl: 'github:username/v3e#main'
},
'v3a': {
downloadUrl: 'github:username/v3a#main'
}
};
// create <project>
program
.command('create <project>')
.description('创建项目')
.action((projectName) => {
//命令行答询
console.clear();
console.log(chalk.blue(version));
console.log('');
inquirer.prompt([{
type: 'input',
name: 'name',
message: '请输入项目名称',
default: projectName
}, {
type: 'list',
name: 'templateName',
message: '请选择项目模版',
choices: [
`v3e (${chalk.yellow('Vue3 Element-Plus Admin')})`,
`v3a (${chalk.yellow('Vue3 Antd Admin')})`
],
filter: function (val) {
return val.substr(0, 3);
}
}
]).then(answers => {
let downloadUrl = templates[answers.templateName].downloadUrl;
//下载github项目，下载墙loading提示
console.log('');
const spinner = ora('正在下载模板...').start();
//第一个参数是github仓库地址，第二个参数是创建的项目目录名，第三个参数是clone
download(downloadUrl, projectName, { clone: true }, err => {
if (err) {
console.log(logSymbols.error, chalk.red(err));
} else {
spinner.succeed('项目模板下载成功');
console.log('');
//根据命令行答询结果修改package.json文件
let packageContent = fs.readFileSync(`${projectName}/package.json`, 'utf8');
let packageResult = handlebars.compile(packageContent)(answers);
fs.writeFileSync(`${projectName}/package.json`, packageResult);
console.log(' ', chalk.gray('$'), chalk.yellow(`cd ${projectName}`));
console.log(' ', chalk.gray('$'), chalk.magentaBright('git init'));
console.log(' ', chalk.gray('$'), chalk.cyan('yarn'));
console.log(' ', chalk.gray('$'), chalk.green('yarn serve'));
console.log('');
}
})
})
});4、发布到NPM
首先，在npm (npmjs.com)创建一个账号，然后在本地通过npm login登录, 这里需要注意你的npm源不能用第三方源，否则会登录403错误
npm login
//登录成功后执行发布
npm publish这里还有一点注意，你要发布的项目要在npm官网查一下是否有重复，如果重复是发布不成功，此时你要修改一下你的项目名称和bin名称(xtt-cli)
// package.json
......
"name": "xtt-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"bin": {
"xtt-cli": "index.js"
},
......6、安装使用
发布之后就可以在nodejs环境下安装使用了
// 全局安装
npm install xtt-cli -g
// 创建测试项目
xtt-cli create test总结
本项目仅对脚手架的核心开发做简单的介绍，在此基础上可以丰富更多的功能，比如项目构建好之后，直接初始化git，直接安装依赖包，当然准备好一个最合适的项目模版才是最重要的。
