前言本文介绍使用Node搭建脚手架,方便项目快速开发。我们开发脚手架,而不是项目。目前,我只有一个脚手架——Koa脚手架。等以后写React和webpack的时候,我会自己搭建一套H5端的开发模板。本文从最小脚手架的实现开始,以后会在此基础上添砖加瓦。简介A:B哥,Node能做什么?B:建立一个网络服务。A:不仅如此,它还可以操作系统B:怎么说呢?A:你知道Webpack吗?它是用Node编写的。还有create-react-app、vue-cli、@tarojs/cli之类的,都是用Node写的。这些cli被称为脚手架,只需几行命令就可以下载模板进行快速开发。B:(各种羡慕,吹捧过后),我也想做自己的脚手架A:教你一个脚手架思路看看create-react-app,vue-cli,@tarojs/cli各自的仓库,我们可以提出一些共同点,比如多套模板、友好的交互、漂亮的UI等等。这里我们以taro为例,先用它,看看,再模仿它如何选择不同的模板,生成不同的文件?显然只有一个基本模板。选择scss生成scss文件,选择TypeScript生成TS文件。还是看不懂源码。写完webpack我们再来看看。这里我们只做最简单的脚手架创建项目mkdirazhu-clicdazhu-clinpminit-y然后在package.json中写入一些项目信息。需要安装的npm包。我们先做个表格,看看每个npm包是什么,有什么用,写代码的时候再一步步添加。名称描述Commander执行复杂命令问答问答交互download-git-repo下载远程模板chalk让你console.log带颜色的字,比如成功时的绿色字oraloading创建命令先创建index.js,写在代码中在终端输入#!/usr/bin/envnodeconsole.log('helloworld')运行node程序,输入node命令nodeindex.js即可正确输出helloworld,#!/usr/bin/envnode上面的代码是告诉终端这个文件要用node来执行,一般cli都有特定的命令,比如taro,git等,我们设置我们的命令-azhu。如何让终端识别这个命令?很简单,在package.json文件中添加一个字段bin,声明一个command关键字和对应的执行文件:#package.json..."bin":{"azhu":"index.js"}...然后我们测试一下,在终端输入azhu,会提示:为什么会这样?通常我们在使用cli工具的时候,需要先安装,比如vue-cli,@tarojs/cli,使用前需要全局安装:npmivue-cli-gnpmi@tarojs/cli-g和我们的azhu-cli并没有在npm上发布,当然也没有安装,所以终端还不能识别这个命令。通常我们想在本地测试一个npm包。我们可以使用npmlink命令在本地安装包。我们执行:npmlink然后执行azhu命令就可以看到helloworld了。注意:npmunlink卸载本地包,执行复杂命令commander:处理命令行交互自带-V,-h交互可以通过program.command添加。program.parse会将命令参数传入commander管道,一般放在最后执行npmicommander--savetotransformindex.js#!/usr/bin/envnodeconstprogram=require('commander')constpackage=require('./package.json')program.version(package.version)program.parse(process.argv)runazhu-haddQ&A操作inquirer添加问答操作npmiinquirer--save语法很简单,看代码就知道了:inquirer.prompt([{type:'input',message:'请输入项目名称',name:'name'},{type:'list',message:'Pleaseselectaprojecttemplate',name:'template',choices:['koa-basic'],},]).then((answers)=>{console.log('answers',answers)})每个option中的name是answer输出的值Clonetemplatedownload-git-repo下载远程模板npmidownload-git-repo--save本来是用shelljs的,但是下载不了,只好另选一个Tool下载完成后写好项目名,选择好模板,接下来就是从远程仓库下载模板了。then((answers)=>{console.log('正在复制项目,请稍候')constremote='https://github.com:johanazhu/koa-basic#master'consttarName=answers.namedownload(remote,tarName,{clone:true},function(err){if(err){console.log(err)}else{console.log('Success')}})})添加UI交互有时下载远程仓库需要很多时间,我们必须添加一些UI效果来优化体验对于体验chalk&oranpmichalkora--savechalkisto给控制台添加颜色orayes添加加载效果....then((answers)=>{console.log('正在复制项目,请稍候')constremote='https://github.com:johanazhu/koa-basic#master'consttarName=answers.name+constspinner=ora('下载模板...').start()download(remote,tarName,{clone:true},function(err){if(err){+console.log(chalk.red(err))spinner.fail()}else{+console.log(chalk.green('success'))spinner.succeed()}})})效果如下如下:发布npm,先登录npm,再发布npmlogin...npmpublish补充知识点包管理方法monorepo将多个项目代码存放在一个仓库中软件开发策略将所有项目相关的项目放在一个仓库中(如React,Babel,Umi,Taro)集中管理优势和统一工作流程降低基础设施成本并提高团队协作效率高缺点体积问题权限问题版本控制Multirepo是按模块放置的,用于多个仓库(webpack、rollup)优点灵活性安全缺点代码复用版本管理开发调试基础设施大项目可以使用monorepo,独立性更高可以使用multirepo.我个人更喜欢multirepo的理念。有人把它上升到哲学层面。其实我觉得不同的项目应该采用适合自己的管理方式,比如webpack和rollup。项目独立性比较强,可以使用multirepo。对于React、Umi、Taro等框架,首先需要拆分功能点,其次,每个子库都需要依赖主库。如果使用multirepo方式,关联起来会很麻烦,采用统一管理的方式可以节省很多时间FAQ1:使用shelljs时经常报错,暂时无法解决,所以使用download-git-repothiswayfatal:unabletoaccess'https://github.com/johanazhu/koa-basic/':OpenSSLSSL_read:Connectionwasreset,errno10054解决方法打开Git命令页面,执行git命令脚本:修改设置,取消ssl验证gitconfig--globalhttp.sslVerify"false"注:gitconfig--list查看你的config信息二:download-git-reporeportedanerror'gitclone'failedwithstatus128解决方法:https://github.com/wuqiong7/Note/issues/17远程地址我改成:https://github.com:johanazhu/koa-basic#master就好了Github已经发布了:https://github.com/johanazhu/azhu-cli参考资料搭建企业级脚手架从零开始开发node命令行工具
