NodeJs的出现加深了前端工程的概念，正在向正规军靠拢.先是带来了Gulp、Webpack等强大的构建工具，随后又出现了vue-cli、create-react-app等完善的脚手架，提供了完整的项目结构，让我们可以更专注于业务，而不必去关注很多时间花在项目基础设施上。通常我们只专注于业务开发，拿起一套开箱即用的模板项目，直接搞定。但是，这些现成的脚手架不一定能满足我们的业务需求，也未必是最佳实践。这时候我们就可以自己开发一个脚手架了，那么我们使用的脚手架里面到底做了些什么，又是如何自己搭建脚手架的呢？脚手架代码github地址：https://github.com/hourong88/...以下为正文，文章结构：问题1.脚手架需要实现什么？初始化项目模板功能。2、脚手架需要什么功能？查询功能下载模板（模板和脚手架是分开的，互不影响）写模板优化（git初始化，安装依赖等）3.用什么工具实现的？commander.js命令行工具chalk命令行输出样式美化Inquirer.js命令行交互当然download-git-repogit仓库代码下载、ora命令行加载效果等优化依赖工具都可以基于此，来丰富.下面分为两步：在本地创建并测试cli脚手架；发布脚手架。我们正常的流程是创建本地脚手架，绑定git仓库，发布包。npm包，然后架好脚手架，走完合约发布流程，就OK了。1.发布npm包在本地创建项目首先我们需要创建一个项目，这里叫portal-cli，项目结构如下：-commands//这个文件夹用来放自定义命令-utils-index.js//项目入口-readme.md为了测试，我们先在index.js中放一些内容：#!/usr/bin/envnode//必须在文件头添加以上内容来指定运行环境作为nodeconsole.log('你好cli');对于一般的nodejs项目，我们可以直接使用nodeindex.js，但是这里是脚手架，所以一定不能这样。我们需要将项目发布到npm，用户可以全局安装，然后就可以直接使用我们自定义的命令，类似于portal-cli。因此，我们需要对我们的项目进行更改。首先在package.json中添加如下内容："bin":{"portal-cli":"index.js"}，这样可以将portal-cli定义为命令，但只能在项目中使用此时，它不能用作全局命令。这里我们需要使用npmlink将其链接到全局命令。执行成功后，你可以在你的全局node_modules目录下找到对应的文件。然后输入命令进行测试。如果出现如下内容，则第一步成功过半：anna@annadeMacBook-Airjob%>portal-clihellocli*如果全局有同名bin，会报错，需要把它放到package.json中，把名字从bin改成发布npm包注意：在npm官网注册一个npm账号。如果已经有账号，可以跳过这一步，使用npmlogin登录，需要输入用户名，密码，邮箱npmwhoami查看是否登录成功npmlink本地调试，上面已经调试好了，跳过这一步，使用npmpublish发布。每次发布npm包都要修改版本号//npmpublish报错npmnoticeintegrity:sha512-Jkfy0M/VyAkQb[...]B9Ifdw2hF2CGQ==npmnoticetotalfiles:7npmnoticenpmERR！代码E403npm错误！403403禁止-PUThttp://registry.npmjs.org/portal-portal-cli-hourong-Forbiddennpm错误！403在大多数情况下，您或您的一个依赖项正在请求npmERR！403您的安全策略禁止的软件包版本。放包的时候调了几次都报错，不是403就是404，急。下面总结了几个错误检查表：检查npm包的名称是否与现有的包名称相同，或者更改名称，或者添加后缀。还是报403，查看你的账号是否刚刚注册过，如果是的话，需要进入你的邮箱验证。版本号更新了吗？如果以上3步都修改过，还是报403错误，请重新连接手机4G热点，然后释放。一般不能放行，按照以上5点检查即可解决。第2步如何查看npm源查看本地当前使用的源registrynpmconfiggetregistry切换源registrynpmconfigsetregistry临时切换registrynpmpublish--registry后，再次查看当前源是否为http://registry.npmjs.org注意：在国内发布组件时，必须切换到npmjs，否则npmpublish不会成功。科普npmregistry简单来说，npmregistry相当于一个包注册管理中心。它管理着全球开发者发布的各种插件，开发者可以通过npminstall安装需要的插件。官方的npmregistry是：http://registry.npmjs.org/国内比较快的是：https://registry.npm.taobao.org/上面涉及到的关键命令：npmlink//本地调试npmpublish//发布npmwhoami//查看当前登录的用户名。每次更新一个包，都需要同步更新版本号。发布包需要发布72小时后才能丢弃删除。2.本地脚手架上面我们既然是搭建脚手架，就不能只让它输出一段文字。我们还需要定义一些命令。用户在命令行输入这些命令和参数，脚手架就会执行相应的操作。不需要我们自己去解析这些输入的命令和参数。有现成的wheelcommander完全可以满足我们的需求。安装commandernpminstallchalkcommanderdownload-git-repoinquirerora--save创建目录bin/index.jspackage.json里面的bin改为"bin":{"portal-cli":"bin/index.js"},当然directory的结构你可以随意定义，其中bin从package.json开始，主要的文件都放在那里。创建指挥官初始化命令#!/usr/bin/envnodeconstfs=require('fs');constpath=require('路径');constchalk=require('粉笔');//命令行输出样式美化constcommander=require('commander');//命令行工具constinquirer=require('inquirer');//命令行交互constcheckDire=require('./utils/checkDire.js');const{exec}=require('child_process');const{version}=require('../package.json');const{promptTypeList}=require('./config');functionresolve(dir){returnpath.join(__dirname,'..',dir);}//version版本号commander.version(version,'-v,--version').command('init').alias("i").description("输入项目名称，初始化项目模板").action(async(projectName,cmd)=>{awaitcheckDire(path.join(process.cwd(),projectName),projectName);//检测创建的??项目文件夹是否存在inquirer.prompt(promptTypeList).then(result=>{//inquirer交互式问答const{url,gitName,val}=result.type;console.log("您选择的模板类型信息如下："+val);console.log('项目初始化复制获取...');if(!url){console.log(chalk.red(`${val}此类型不支持...`));进程.exit(1);}exec('gitclone'+url,function(error,stdout,stderr){//git仓库代码下载if(error!==null){console.log(chalk.red(`clonefail,${error}`));return;return;}ername,reject(name,rejfs.=>{if(err){exec('rm-rf'+gitName,function(err,out){});控制台。log(chalk.red(`${projectName}项目模板已经存在`));}else{console.log(chalk.green(`?${projectName}项目模板创建成功(`));}}});});});commander.parse(process.argv);``以上代码分析：1).`checkDire`检查创建的项目文件夹是否存在``constfs=require('fs');constchalk=require('chalk');constpath=require('path');module.exports=function(dir,name){letisExists=fs.existsSync(dir);if(isExists){console.log(chalk.red(`${name}项目已存在于目录中。请尝试使用另一个projectName`));进程.exit(1);//如果存在则退出}};2).Commanderinit命令行进入互动问答3).交互式问答使用inquirer命令交互工具问题数组配置交互式命令。执行命令时，数组中的每个对象都对应一个问题。type是问题的类型，name是问题的名称。可以通过name获取问题的用户输入answermessage就是问题的提示。默认是用户不输入答案时的默认值。validate方法可以验证用户输入的内容。当返回true时，验证通过。如果不正确，可以返回相应的字符串提示。Transformer是在用户输入问题答案后，会在问题位置显示相应的答案，并且需要一个返回值，返回的字符串就是显示内容。具体使用文档：https://github.com/SBoudrias/...4）。问答结束回调提示方法中then中的参数是一个对象。当你从配置中拉取git仓库代码，后面使用的时候，拉不下来。看看是不是没有仓库代码权限。module.exports={npmUrl:'https://registry.npmjs.org/xxx-cli',promptTypeList:[{type:'list',message:'请选择要拉取的模板类型：',name:'type',choices:[{name:'portal前端框架',value:{url:'http://192.168.3.51/xxx/portal-frame.git',//frameworkgitrepositorygitName:'portal-frame',val:'门户前端框架'}}]}],};5).gitclone下载前端框架。也可以使用download-git-repogit仓库代码下载上面的，就是所有的前端脚手架内容，一共四个文件，index.js最重要（参考其他两个配置文件），加上一个package.json。执行如下命令发布：npmlink//本地调试npmpublish//发布3.如何使用？当需要使用框架时，新建一个空文件夹，执行：npminstallportal-cli-g//全局安装portal-cliportal-cliinit//portal-cliinittest，test就是你放的地方文件夹的名字可以自己定义，这样前端脚手架生成模板命令工具就完成了。如果想要更加个性化，可以完善npm包，包括包的版本说明，readme；丰富脚手架交互查询内容，美化操作提示等。结论node.js的本质还是js。熟悉js后，结合node依赖和语法，各种试错，调试，需要耐心和细心。另外，开始做例子的时候构思思路，注意循环顺序。以官方文档为主，网络博客文章为辅。官方的比较靠谱。博客的各种坑要么过时了，要么文字不连贯，不可执行。总的来说，学习也是一个探索的过程，让我们一起进步吧！【完】参考上文：https://www.cnblogs.com/cangq...https://segmentfault.com/a/11...Inquirer.js：https://github.com/SBoudrias/...npm包生命周期：https://segmentfault.com/a/11...
