日志是找bug不错的助力。在网页上，一般很少打印日志，需要打印时，也可以使用一些异常监控平台(如sentry)及时将日志上传到服务器。由于用户量巨大以及各种限制，这种收集方式往往无法用来大量收集日志。但是在electron中，我们就可以选择和传统的后端那样，使用库(如log4js)将日志缓存到本地。当客户端遇到错误时，可以告知客户主动上传日志。

但是我们现在开发往往使用很多框架，需要使用webpack构建，构建时又不可避免的需要混淆压缩等功能，这时，使用log4js打印的日志无法反应源文件信息，为排错带来麻烦。

java打印的日志:

01:50:39.633 INFO com.glmapper.spring.boot.controller.HelloController - test

log4js打印的日志：

01:50:39.633 INFO logger-name - test

我们在构建前端项目时，不可避免的会用到babel,而babel也为其插件提供了访问、修改语法树的功能。因此，我们就可以做一个babel插件，通过访问语法树，找到logger函数；然后将文件信息通过修改语法树的形式，设为logger函数的第一个参数。这也是 babel-plugin-logger-source的实现方式。

babel-plugin-logger-source

效果

// src/view/app.js
class App() {
    constructor() {
        logger.log('test')//line no 20,column no 10
    }
}
↓ ↓ ↓ ↓ ↓ ↓
class App() {
    constructor() {
        logger.log('[s.V/app.js (20:10)]', 'test')
    }
}

使用方式

babel-plugin-logger-source是一个babel插件，所有需要在安装后添加babelrc中。
安装:

yarn add babel-plugin-logger-source -D
或
npm install babel-plugin-logger-source -S -D

配置:

//babel.config.js
module.exports = {
  plugins: [
  	[ loggerSource  ],
  ]
};

可用的配置

babel-plugin-logger-source默认支持为 logger.info,logger.log,logger.warn,logger.error,logger.debug 函数注入参数。也可以通过配置修改，同时也可以在文件信息前添加前缀、自定义文件信息生成方式等。

{
  "plugins": [
    ["logger-source",{
      logger: string[];//logger函数
			prefix: string;// 前缀
			resolveFileName: Function | 'acronyms' | 'fullpath';//文件信息的输出方式
		}]
  ]
}

logger

为指定的函数追加文件信息。
默认:

logger:[
	'logger.log',
	'logger.info',
	'logger.wran',
	'logger.error',
	'logger.debug',
]

prefix

在文件信息前添加前缀。
如: prefix:crm-client。

logger.info('test');
↓ ↓ ↓ ↓ ↓ ↓
logger.info('crm-client [s.V/app.js (20:10)]', 'test')

resolveFileName

输出文件信息的方式。提供了fullpath和acronyms 方式，默认acronyms。

acronyms

缩写

// src\\View/app.js

logger.info('test');
↓ ↓ ↓ ↓ ↓ ↓
logger.info('[s.V/app.js (20:10)]', 'test')

fullpath

全路径

// src\\View/app.js

logger.info('test');
↓ ↓ ↓ ↓ ↓ ↓
logger.info('[s.V/app.js (20:10)]', 'test')

// src\\View/app.js

logger.info('test');
↓ ↓ ↓ ↓ ↓ ↓
logger.info('[src\\View\\app.js (2:10)]', 'test')

自定义函数

((params: ResolveFileNameParams) => string)
自定义函数，传参如下:

params: {
  filename: string; //文件路径
  projectPath: string; //项目根目录
  prefix: string; //前缀，在babelrc中设置的
  line: number; //行号
  column: number; //列号
}

如:

{
  plugins: [
    [
      'logger-source',
      {
        resolveFileName: function (params) {
          return params.filename;
        },
      },
    ],
  ],
};

感谢您的阅读，欢迎提出建议和issue。假如感觉不错的话，欢迎star.

让你的electron应用像java那样打印日志