关于node.js:前端脚手架CLI生成模版命令工具包括npm包的发布脚手架的搭建注意事项优化等

9次阅读

共计 6425 个字符，预计需要花费 17 分钟才能阅读完成。

NodeJs 的呈现，让前端工程化的理念不断深入，正在向正规军凑近。先是带来了 Gulp、Webpack 等弱小的构建工具，随后又呈现了 vue-cli 和 create-react-app 等欠缺的脚手架，提供了残缺的我的项目架构，让咱们能够更多的关注业务，而不用在我的项目基础设施上破费大量工夫。

平时咱们都只专一在业务上的开发，拿起一套开箱即用的模板我的项目就间接干。然而，这些现成的脚手架未必就能满足咱们的业务需要，也未必是最佳实际，这时咱们就能够本人开发一个脚手架，那么咱们应用的脚手架外面到底做了什么，如何本人搭建脚手架呢？

脚手架代码 github 地址：https://github.com/hourong88/…

以下为注释，文章构造：

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

初始化我的项目模版能力。

2. 脚手架须要什么性能？

问询性能
下载模版（模版与脚手架拆散，互不影响）
写入模版
优化（git 初始化，装置依赖等）

3. 用什么工具实现？

commander.js 命令行工具
chalk 命令行输入款式丑化
Inquirer.js 命令行交互

当然还有，download-git-repo git 仓库代码下载，ora 命令行加载中成果等优化依赖工具，都能够在此基础上，进行丰盛。

以下分为两步实现：

本地创立 cli 脚手架并测试；
公布脚手架

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

首先，咱们须要创立一个我的项目，这里就叫 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 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 <http://registry.npmjs.org/>

长期切换

registry npm publish --registry <http://registry.npmjs.org/>

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

留神：国内目前公布组件时，必须切换为 npmjs，否则 npm publish 也不会胜利

科普 npm registry

简略来说，npm registry 就相当于一个包注册管理中心。它治理着全世界的开发者们公布上来的各种插件，同时开发者们能够通过 npm install 的形式装置所须要的插件。

npm 官网 registry 为：http://registry.npmjs.org/

国内速度较快的为：https://registry.npm.taobao.org/

以上波及到的要害命令：

npm link  // 本地调试
npm publish  // 公布
npm whoami  // 查看以后登陆的用户名

每次更新包须要同步更新版本号，公布的包须要公布 72 小时当前才能够废除删除。

上文中，咱们既然是搭建脚手架，必定不能只让它输入一段文字吧，咱们还须要定义一些命令，用户在命令行输出这些命令和参数，脚手架会做出对应的操作。这里不须要咱们本人去解析这些输出的命令和参数，有现成的轮子 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 <projectName>')
  .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 为用户输出问题答案后将对应的答案展现到问题地位，须要有返回值，返回到字符串为展现内容

具体应用文档：https://github.com/SBoudrias/…

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 // 公布

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

npm install portal-cli -g  // 全局装置 portal-cli
portal-cli init <projectName>  //portal-cli init test，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…

正文完

node.js

发表至： node.js

2020-12-23

0

关于node.js:面试官SpringBoot的启动流程清楚吗

关于node.js:工作笔记汇总

nodejsbuffer-基础篇

关于node.js:前端图床搭建实践后端篇

关于java:神秘使者到Java帝国传道协程竟被轰了出去

关于node.js:前端脚手架CLI生成模版命令工具包括npm包的发布脚手架的搭建注意事项优化等

发问

一、公布 npm 包

本地创立我的项目

公布 npm 包注意事项：

二、本地脚手架搭建

三、如何应用？

结语

参考：

站内搜索