前端架构: 脚手架通用框架封装之日志功能封装(教程三)

日志功能封装

接上文，仍旧在 abc-cli 项目中
参考：https://blog.youkuaiyun.com/Tyro_java/article/details/136421939
在 abc-cli 目录下创建 utils 包，$ lerna create utils
- name 填入 @abc.com/utils
- entry point 填入 lib/index.js
- 其他，一路回车
在 utils包中安装 npmlog 依赖，在 abc-cli 目录下，执行 $ npm i npmlog -w @abc.com/utils
- 在 utils包中安装了 npmlog
- 并移除之前在 cli包中安装的 npmlog 依赖，后续要修改相关log逻辑

新建 abc-cli/packages/utils/lib/log.js, 并写入

const log = require('npmlog');

log.level = 'verbose'; // 注意这个日志级别，如果不加，log.verbose 是不会有任何输出的
module.exports = log;

把 abc-cli/packages/utils/lib/utils.js 重命名为 index.js, 并编辑
```
const log = require('./log')

module.exports = {
  log,
}
```
现在把 utils包安装到 cli包中，并进行使用
在 abc-cli 中，执行 npm i @abc.com/utils -w packages/cli

修改 abc-cli/packages/cli/bin/cli.js

#!/usr/bin/env node

const il = require('import-local');
const { log } = require('@abc.com/utils'); // 注意这里
const entry = require('../lib/index.js');

if (il(__filename)) {
  log.info('abc-cli', '使用本地版本')
} else {
  entry(process.argv.slice(2));
}

修改 abc-cli/packages/cli/lib/index.js

const commander = require('commander');
const createInitCommand = require('@abc.com/init');
const { log } = require('@abc.com/utils'); // 注意这里
const { program } = commander;
const pkg = require('../package.json');

module.exports = (args) => {
  log.info('log test version', pkg.version); // 注意这里
  program
    .name(Object.keys(pkg.bin)[0])
    .usage('<command> [options]')
    .version(pkg.version)
    .option('-d, --debug', '是否开启调试模式', false)

  createInitCommand(program);

  program.parse(process.argv)
}

在 abc-cli 中执行，$ abc-cli init sss
```
info log test version 0.0.0
pre
init ...
sss
{ force: false, debug: false }
post
```
- 这里输出中，第一行就出来了，说明这个log功能整合完毕
同样，在init中的一些信息可以用 log 来输出，可以给 init包安装 utils包
在 abc-cli 目录中执行 $ npm i @abc.com/utils -w packages/init

在 abc-cli/packages/init/lib/index.js 中使用

const { log } = require('@abc.com/utils'); // 顶部加上这个

// action方法 如下使用 log.verbose 来输出
action([name, opts]) {
  log.verbose('init ...')
  log.verbose(name)
  log.verbose(JSON.stringify(opts))
}

注意，log.verbose 在一般情况下，不会打印出来, 需要在上面配置日志级别(已配置)

执行，$ abc-cli init xx, 查看输出

info log test version 0.0.0
pre
verb init ...
verb sss
verb {"force":false,"debug":false}
post

注意，两者的区别

同样，可以根据条件来做这块，在 abc-cli/packages/utils/lib/log.js 中

const log = require('npmlog');

const { argv } = process;
const isDebug = argv.includes('--debug') || argv.includes('-d');

// 基于调试模式来确定输出日志的等级
if (isDebug) {
  log.level = 'verbose'
} else {
  log.level = 'info';
}

// 在log的前面加上标识：
log.heading = 'abc.com'

module.exports = log;

在 abc-cli 目录下执行 $ abc-cli init sss, 查看输出
```
abc.com info log test version 0.0.0
pre
post
```
- 这里 verbose 是没有输出的，但是加上了 abc.com 这个前缀

在 abc-cli 目录下执行 $ abc-cli init sss -d, 查看输出

abc.com info log test version 0.0.0
pre
abc.com verb init ...
abc.com verb sss
abc.com verb {"force":false,"debug":false}
post

这里输出了 verbose 也有 abc.com

同样，也可以添加日志的level功能，在 abc-cli/packages/utils/lib/log.js 中添加

// 添加level功能
log.addLevel('success', 2000, { fg: 'green', bg: 'red', bold: true })

在 abc-cli/packages/cli/lib/index.js 中的module.exports第一行修改为
```
log.success('log test version', pkg.version);
```
在 abc-cli 目录下执行 $ abc-cli init xx，查看输出结果
```
abc.com success log test version 0.0.0
pre
post
```
- 这里，输出第一行 success 绿色，红底，加粗
所以，这种是自己定义 log 级别，非常好用
同样, 更多用法，可以看 npmlog 这个依赖的源码
- 这个 2000 也是有说法的表示权重的意思
- 在源码中可以看到info的定义也是 2000
- log.http 这类也是比较常用的，可以输出一个链接地址，示例
  - log.http('request', 'request to: https://www.baidu.com')
- log.timing 这类输出时间，示例
  - log.timing('timing', '10s')