乐趣区

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

jiezi

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

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

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

以下为注释，文章构造：

发问

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

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

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

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

3. 用什么工具实现？

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

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

以下分为两步实现：

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

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

一、公布 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 包注意事项：

  1. npm 官网注册一个 npm 账户，已有账户的能够跳过这一步
  2. 应用 npm login 登录，须要输出username、password、email
  3. npm whoami 查看本人是否胜利登陆
  4. npm link本地调试, 下面曾经调试的，跳过这一步
  5. 应用 npm publish 公布
  6. 每次公布 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，那个捉急。上面总结了几个报错查看清单：

  1. 查看 npm 包的名字跟已有的包名是否反复，要么就改个名字，或者加后缀
  2. 如果用的是 cnpm 源，要改成 npm，办法见上面阐明 registry
  3. 如果还是报 403，你的账号看是不是刚刚注册的，如果是的话，须要进入你的邮箱，验证一下邮箱。
  4. 版本号是否更新
  5. 如果以上 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 能够应用，齐全能够满足咱们的须要。

  1. 装置 commander

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

  1. 创立目录 bin/index.js
  2. package.json 外面 bin 改为
 "bin": {"portal-cli": "bin/index.js"},

当然目录构造你能够随便定义，package.json 外面 bin 从哪里起，次要文件就放哪儿。

  1. 创立 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…

退出移动版