从0开发一个高性能前端脚手架-第六篇-脚手架准备阶段实现(1)

172 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第13天,点击查看活动详情

image.png

下面按照这个图来实现准备阶段

检查版本号

通过package.json来拿到version

'use strict';

module.exports = core;

const pkg = require('../package.json')
function core() {
    checkPkgVersion()
}


function checkPkgVersion(){
    console.log(pkg.version)
}

这里有个知识点:

知识点

require可以加载所有后缀的文件,但是除了 .json和.node文件,都以js文件内容处理

.js => module.exports / exports

.json => JSON.parse

log模块

我们来实现根据环境变量打印log的级别,支持debug模式

我们使用npm第三方库 npmlog来实现

接下来看下npmlog的源码

npmlog的源码

log.addLevel('silly', -Infinity, { inverse: true }, 'sill')
log.addLevel('verbose', 1000, { fg: 'cyan', bg: 'black' }, 'verb')
log.addLevel('info', 2000, { fg: 'green' })
log.addLevel('timing', 2500, { fg: 'green', bg: 'black' })
log.addLevel('http', 3000, { fg: 'green', bg: 'black' })
log.addLevel('notice', 3500, { fg: 'cyan', bg: 'black' })
log.addLevel('warn', 4000, { fg: 'black', bg: 'yellow' }, 'WARN')
log.addLevel('error', 5000, { fg: 'red', bg: 'black' }, 'ERR!')
log.addLevel('silent', Infinity)

从源码可以看到通过addLevel来增加不同的log,第二个参数代表log的级别,debug模式就是verbose,级别也就是1000

接下来通过npmlog来定制log

通过npmlog定制log

自定义log,来实现success日志打印

下面分别定义和使用:

// 定义
const log = require('npmlog')
log.addLevel('success',2000,{fg:'green',bold:true})

// 使用
const log = require('@rd-cli-dev/log')
log.success('test', 'success...')

调整npmlog level

从npmlog源码中可以看出,默认的级别是info,也就是2000

// default level
log.level = 'info' // 默认是info
// 默认level是2000,大于2000才会生效
log.addLevel('info', 2000, { fg: 'green' }) 

level小于2000,不会生效,这时需要将level调整为verbose时候,变成debug模式,需要根据环境变量调整

log.addLevel('verbose', 1000, { fg: 'cyan', bg: 'black' }, 'verb')

通过上面的讲解,我们来定制下log包

封装和使用log模块

// src/utils/log/lib/index.js
// 封装
'use strict';

const log = require('npmlog')

log.level = process.env.LOG_LEVEL ? process.env.LOG_LEVEL: 'info';// 判断debug模式
log.heading = 'rd-cli-dev' // 修改前缀
log.addLevel('success',2000,{fg:'green',bold:true}) // 添加自定义命令
module.exports = log;

// src/core/cli/lib/index.js
// 使用
'use strict';

module.exports = core;

const pkg = require('../package.json')
const log = require('@rd-cli-dev/log')
function core() {
    checkPkgVersion()
}


function checkPkgVersion(){
   log.info('cli', pkg.version)
}

log的效果

image.png