前言做前端已经三四年了。我带了一个五人的小型前端团队。第一次写脚手架和分享文章。文笔太烂，勿喷勿喷勿喷。每次人肉动代码的时候，都在想能不能给团队做一个类似vue-cli的脚手架？考虑了很久，由于种种原因一直没有实施。正好最近不忙，现在不做，待会儿呢！启动起来，查了网上的文档，gitHub扒了vue-cli的源码，折腾了两天……搞定了。拿出来分享一下。准备工作1.在gitHub上新建一个组织和仓库并不难。总结在一张图片里，按照提示填写信息即可。如下图，我创建了一个名为template-organization的组织。组织创建完成后，可以在组织模板-organization下新建仓库。demo-template的重点是，https://api.github.com/users/...，获取组织模板-组织仓库信息下的所有信息。2.npmaccount**注册账号：**[https://www.npmjs.com/][2]**登录：**npmlogin**添加用户信息到注册表**npmadduser主要内容写代码准备工作已完成，开始编码...打开终端并初始化项目.json文件。它只涵盖最常见的项目，并尝试猜测合理的默认值。请参阅`npmhelpjson`以获取有关这些字段的权威文档以及它们的确切作用。之后使用`npminstall`来安装包并将其作为依赖项保存在package.json文件中。随时按^C退出。包名称：(edu-test-cli)版本：(1.0.0)描述：这是一个简单的脚手架入口点：(index.js)测试命令：gitrepository:keywords:clieduzhxauthor:ZhangXinlicense:(ISC)MIT关于写入/Users/zhangxin/study/edu-test-cli/package.json:{"name":"edu-test-cli","version":"1.0.0","description":"这是一个简单的脚手架","main":"index.js","scripts":{"test":"echo\"错误：没有测试规范ed\"&&exit1"},"keywords":["cli","edu","zhx"],"author":"张欣","license":"MIT"}这样可以吗？(yes)yes项目的package.json结构基本out了添加依赖包npmichalkcommanderdownload-git-repoinquirerorarequest--save修改package.json中的配置如下{"name":"edu-test-cli","version":"1.0.0","description":"Thisisasimplescaffold","preferGlobal":true,"bin":{"edu":"bin/edu"},"dependencies":{"chalk":"^1.1.3","commander":"^2.9.0","download-git-repo":"^1.1.0","inquirer":"^6.2.0","ora":"^3.0.0","请求":"^2.88.0"},"scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":["cli","edu","zhx"],"author":"张鑫","license":"MIT"}项目结构，如下>edu-test-cli|--bin|--edu|--lib|--list.js|--init.js|--package.json|--README.md在bin目录下新建一个edu（无后缀），代码如下#!/usr/bin/envnodeprocess.env.NODE_PATH=__目录名+'/../node_modules/'constprogram=require('commander')program.version(require('../package.json').version).usage('[options]')program.command('list').描述tion('查看所有模板').alias('l').action(()=>{require('../lib/list')()})program.command('init').description('生成一个新项目').alias('i').action(()=>{require('../lib/init')()})program.parse(process.argv)if(!program.args.length){program.help()}lib目录下的init.js，代码如下constora=require('ora')constinquirer=require('inquirer')constchalk=require('chalk')constrequest=require('request')constdownload=require('download-git-repo')module.exports=()=>{request({url:'https://api.github.com/users/template-organization/repos',headers:{'User-Agent':'edu-test-cli'}},(err,res,body)=>{if(err){console.log(chalk.red('查询模板列表失败'))console.log(chalk.red(err))process.exit();}constrequestBody=JSON.parse(body)if(Array.isArray(requestBody)){lettplNames=[];requestBody.forEach(repo=>{tplNames.push(repo.name);})让promptList=[{type:'list',message:'Pleaseselectatemplate',name:'tplName',choices:tplNames},{type:'input',message:'请输入项目名称',name:'projectName',validate(val){if(val!==''){returntrue}return'项目名称不能为空'}}]inquirer.prompt(promptList).then(answers=>{letind=requestBody.find(function(ele){returnanswers.tplName==ele.name;});让gitUrl=`${ind.full_name}#${ind.default_branch}`,defaultUrl='./',projectUrl=`${defaultUrl}/${answers.projectName}`,spinner=ora('\n开始生成项目，请稍候...');spinner.start();download(gitUrl,projectUrl,(error)=>{spinner.stop();if(error){console.log('模板下载失败...')console.log(error)process.exit()}console.log(chalk.green(`\n√${answers.projectName}项目生成！`))console.log(`\ncd${answers.projectName}&&npminstall\n`)})})}else{console.error(requestBody.message)}})}lib目录下的list.js，代码如下：constrequest=require('request');constchalk=require('chalk')constora=require('ora')module.exports=()=>{letspinner=ora('\n'+chalk.yellow('正在查询模板列表，请稍候...'));微调器。开始（）；请求({url:'https://api.github.com/users/template-organization/repos',headers:{'User-Agent':'edu-test-cli'}},(err,res,body)=>{spinner.stop();if(err){console.log(chalk.red('查询模板列表失败'))console.log(chalk.red(err))process.exit();}constrequestBody=JSON.parse(body)if(Array.isArray(requestBody)){console.log()console.log(chalk.green('可用模板列表：'))console.log()requestBody.forEach(repo=>{console.log(''+chalk.yellow('★')+''+chalk.blue(repo.name)+'-'+repo.description)})}else{console.error(requestBody.message)}})}到这里就这么简单脚手架开发好之后，代码就来了，是不是很简单？开发、测试、发布开发时，可以使用如下命令查看效果nodebin/edulist查看所有可用模板nodebin/eduinit下载模板作为开发测试的初始项目，全局如何使用edulist/init命令呢？npmlink///只能在本地使用。开发测试完成后发布npmpublish///将包发布到npm，大家可以安装使用了。示例：edu-test-cli>$npmpublish+edu-test-cli@1.1.0使用方法安装npminstall-gedu-test-cli查看模板列表$edulist可用模板列表：★demo-template-这是关于移动适配解决方案的示例项目。创建项目$eduinit?请选择一个模板（使用箭头键）?演示模板？Pleaseenteraprojectname最后终于完成了。写文章比写代码更累。.....
