html项目cli脚手架,前端脚手架CLI生成模版命令工具（包括，npm包的发布，脚手架的搭建，注意事项，优化等）...

NodeJs的出现，让前端工程化的理念不断深刻，正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具，随后又出现了vue-cli和create-react-app等完善的脚手架，提供了完整的项目架构，让咱们能够更多的关注业务，而没必要在项目基础设施上花费大量时间。html

平时咱们都只专一在业务上的开发，拿起一套开箱即用的模板项目就直接干。可是，这些现成的脚手架未必就能知足咱们的业务需求，也未必是最佳实践，这时咱们就能够本身开发一个脚手架，那么咱们使用的脚手架里面到底作了什么，如何本身搭建脚手架呢？前端

如下为正文，文章结构：node

提问

1.脚手架须要实现什么？react

初始化项目模版能力。git

2.脚手架须要什么功能？github

问询功能

下载模版(模版与脚手架分离，互不影响)

写入模版

优化(git初始化，安装依赖等)

3.用什么工具实现？vue-cli

commander.js 命令行工具

chalk 命令行输出样式美化

Inquirer.js 命令行交互

固然还有，download-git-repo git仓库代码下载，ora 命令行加载中效果等优化依赖工具，均可以在此基础上，进行丰富。npm

如下分为两步完成：json

本地建立cli脚手架并测试 ；

发布脚手架

咱们正常的流程是建立本地脚手架，绑定git仓库，发布包，从易到难，咱们反过来，本文先讲怎么发一个最简单的npm包，而后把脚手架搭好了，走一遍发包流程，就OK了。

1、发布npm包

本地建立项目

首先，咱们须要建立一个项目，这里就叫portal-cli, 项目结构以下：

- commands  // 此文件夹用于放置自定义命令

- utils

- index.js  // 项目入口

- readme.md

为了测试，咱们先在index.js放点内容：

#!/usr/bin/env node

// 必须在文件头添加如上内容指定运行环境为node

console.log('hello cli');

对于通常的nodejs项目，咱们直接使用node index.js就能够了，可是这里是脚手架，确定不能这样。咱们须要把项目发布到npm，用户进行全局安装，而后就能够直接使用咱们自定义的命令，相似portal-cli这样。

因此，咱们须要将咱们的项目作下改动，首先在package.json中添加以下内容：

"bin": {

"portal-cli": "index.js"

},

这样就能够将portal-cli定义为一个命令了，但此时仅仅只能在项目中使用，还不能做为全局命令使用，这里咱们须要使用npm link将其连接到全局命令，执行成功后在你的全局node_modules目录下能够找到相应文件。而后输入命令测试一下，若是出现以下内容说明第一步已经成功一大半了：

anna@annadeMacBook-Air job % > portal-cli

hello cli

*若是全局有bin相同名字的，会报错，须要把package.json里面bin起的名字修改一下

发布npm包注意事项：

npm官网注册一个npm帐户，已有帐户的能够跳过这一步

使用npm login登陆，须要输入username、password、email

npm whoami 检查本身是否成功登录

npm link本地调试,上面已经调试的，跳过这一步

使用npm publish发布

每次发布npm包，都要修改版本号

//npm publish报错

npm notice integrity:     sha512-Jkfy0M/VyAkQb[...]B9Ifdw2hF2CGQ==

npm notice total files:   7

npm notice

npm ERR! code E403

npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/portal-portal-cli-hourong - Forbidden

npm ERR! 403 In most cases, you or one of your dependencies are requesting

npm ERR! 403 a package version that is forbidden by your security policy.

我发布包的时候，调整了几回，报错，不是403就是404，那个捉急。下面总结了几个报错检查清单：

检查npm包的名字跟已有的包名是否重复，要么就改个名字，或者加后缀

若是用的是cnpm源，要改为npm，方法见下面说明registry

若是仍是报403，你的帐号看是否是刚刚注册的，若是是的话，须要进入你的邮箱，验证一下邮箱。

版本号是否更新

若是以上3步修改了，仍是报403错误，就链接手机4g热点再发布一下。

通常发布不了，按照以上5点进行检查，能够解决。

检查第2步npm源的方法

查看本地当前使用的源

registry npm config get registry

切换源

registry npm config set registry

临时切换

registry npm publish --registry

设置完之后，再次查看当前源是不是http://registry.npmjs.org

注意：国内目前发布组件时，必须切换为npmjs，不然npm publish也不会成功

科普npm registry

简单来讲，npm registry就至关于一个包注册管理中心。它管理着全世界的开发者们发布上来的各类插件，同时开发者们能够经过npm install的方式安装所须要的插件。

以上涉及到的关键命令：

npm link  // 本地调试

npm publish  // 发布

npm whoami  //查看当前登录的用户名

每次更新包须要同步更新版本号，发布的包须要发布72小时之后才能够废弃删除。

2、本地脚手架搭建

上文中，咱们既然是搭建脚手架，确定不能只让它输出一段文字吧，咱们还须要定义一些命令，用户在命令行输入这些命令和参数，脚手架会作出对应的操做。这里不须要咱们本身去解析这些输入的命令和参数，有现成的轮子commander可使用，彻底能够知足咱们的须要。

安装commander

npm install chalk commander download-git-repo inquirer ora --save

建立目录 bin/index.js

package.json 里面bin改成

"bin": {

"portal-cli": "bin/index.js"

},

固然目录结构你能够随意定义，package.json里面bin从哪里起，主要文件就放哪儿。

建立commander init命令

#!/usr/bin/env node

const fs = require('fs');

const path = require('path');

const chalk = require('chalk'); //命令行输出样式美化

const commander = require('commander'); //命令行工具

const inquirer = require('inquirer'); //命令行交互

const checkDire = require('./utils/checkDire.js');

const { exec } = require('child_process');

const { version } = require('../package.json');

const { promptTypeList } = require('./config');

function resolve(dir) {

return path.join(__dirname,'..',dir);

}

//version 版本号

commander.version(version, '-v, --version')

.command('init ')

.alias("i")

.description("输入项目名称，初始化项目模版")

.action(async (projectName,cmd) => {

await checkDire(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} 该类型暂不支持...`));

process.exit(1);

}

exec('git clone ' + url, function (error, stdout, stderr) {  //git仓库代码下载

if (error !== null) {

console.log(chalk.red(

`clone fail,${error}`

));

return;

}

fs.rename(gitName, projectName, (err)=>{

if (err) {

exec('rm -rf '+gitName, function (err, out) {});

console.log(chalk.red(`The ${projectName} project template already exist`));

} else {

console.log(chalk.green(`✔ The ${projectName} project template successfully create(项目模版建立成功)`));

}

});

});

})

});

commander.parse(process.argv);

``

以上代码解析：

1). `checkDire`检查建立项目文件夹是否存在

``const fs = require('fs');

const chalk = require('chalk');

const path = require('path');

module.exports = function (dir,name) {

let isExists = fs.existsSync(dir);

if (isExists) {

console.log(chalk.red(

`The ${name} project already exists in  directory. Please try to use another projectName`

));

process.exit(1); //存在则跳出

}

};

2). commander init 命令行进入交互问答

3). 交互问答用inquirer命令交互工具

question 数组为交互命令配置，数组中每个对象都对应一个执行命令时候的一个问题

type为该提问的类型，name为该问题的名字，能够在后面经过name拿到该问题的用户输入答案

message为问题的提示

default则为用户没输入时的默认为其提供一个答案

validate方法能够校验用户输入的内容，返回true时校验经过，若不正确能够返回对应的字符串提示文案

transformer为用户输入问题答案后将对应的答案展现到问题位置，须要有返回值，返回到字符串为展现内容

4). 问答结束的回调prompt方法中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', //框架git仓库

gitName: 'portal-frame',

val:'portal前端框架'

}

}]

}],

};

5).git clone下载前端框架。也能够用download-git-repo git仓库代码下载

以上，就是所有前端脚手架内容，总共四个文件，index.js是最重要的(引用另外两个配置文件)，加上一个package.json。

执行如下命令发布：

npm link // 本地调试

npm publish // 发布

3、如何使用？

在须要用到框架的时候，新建空文件夹，执行：

npm install portal-cli -g  //全局安装portal-cli

portal-cli init   //portal-cli init test ，test就是你放文件夹的名称，能够本身定义

这样前端脚手架生成模版命令工具就完成了。若是想更个性化，能够把npm包完善一下，包括包的版本说明，readme；丰富脚手架交互问询内容，美化操做提示等。

结语

node.js，本质仍是js，js熟悉之后，结合node依赖和语法，各类试错，调试，须要耐心和细心。

另外，开始作一个实例的时候，构思思路，注意流转顺序。主要以官方文档为主，网上博客文章为辅。

官方的仍是靠谱一点，博客各类坑，不是过期了，就是讲的不连贯，没有可执行性。

总的来讲，学习也是一个探索的过程，共同进步！

以上【完】

参考：