为什么要弄个脚手架

对于我个人，经常写些demo，或者写一个新项目的时候，要么就是把以前的项目模板复制一份，要么就是重新搭建一份，显得比较麻烦，浪费时间，所以就有了搭建一个能满足自己需要的脚手架。

脚手架的效果

这是一个基本的脚手架，init一个项目，输入项目名称，版本号等信息，然后从git仓库拷贝一份自己需要的项目模板。类似vue的vue-cli或者react的create-react-app，只是这个比较简单.

基本思路参考下图

这部分参考了掘金@张国钰大佬的思路.

项目结构

主要3个，一个bin文件夹，放执行命令的入口文件

lib文件夹，放项目的主要文件，package.json不多说

这项目主要用到的几个包

• commander: 命令行工具
• download-git-repo: 用来下载远程模板
• ora: 显示loading动画
• chalk: 修改控制台输出内容样式
• log-symbols: 显示出 √ 或 × 等的图标
• inquirer.js:命令交互
• metalsmith：处理项目模板
• handlebars：模板引擎

使用commander.js命令行工具

修改package.json的bin执行入口，

"bin": { "lz": "./bin/pile(t)(meta)); }) done() }).build(err => { remove(src); err ? reject(err) : resolve(context); }) })}

通过Handlebars给我们的package_temp.json进行插值渲染，然后把渲染好的文件内容替换掉原先的package.json的内容

其中有时候我们也需要输入选择某些文件不下载，所以，我们在模板仓库加入一个文件，取名templates.ignore，
然后，跟处理package_temp.json类似，优先渲染这个文件内容，找出需要忽略的文件删掉。最后，删除临时文件夹，把文件移动到项目的文件。这样项目就差不多了。
加入删除文件夹得功能，在lib创建remove.js

const fs =require("fs");const path=require("path");function removeDir(dir) { let files = fs.readdirSync(dir) for(var i=0;i<files.length;i++){ let newPath = path.join(dir,files[i]); let stat = fs.statSync(newPath) if(stat.isDirectory()){ //如果是文件夹就递归下去 removeDir(newPath); }else { //删除文件 fs.unlinkSync(newPath); } } fs.rmdirSync(dir)//如果文件夹是空的，就将自己删除掉}module.exports=removeDir;

结尾

关于美化得就不说了，大概的脚手架就以上这些内容，当然这些功能太过于简单，我们还需要根据自己的需要，添加功能，比如说，是否要启用Typescript，要less还是sass等，大概原来差不多，根据输入，选择加载哪些文件，大家自由扩展，谢谢阅读.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。