VUE错误日志监控（三）

在前两篇文章里面我们着重处理了source-map的反解，这篇文章主要来研究一下自动化上传.map文件到日志服务器。

vue的项目基本都是基于vue-cli或者webpack搭建的，我们要在生产环境打包完成后将.map文件上传到日志服务器最容易实现的办法就是采用webpack的plugin，只需要在打包完成后扫描.map文件然后上传就可以了。

首先我们创建一个plugin文件夹，新建一个index.js文件作为我们插件的入口。

然后按照webpack插件模板写入代码，完整代码如下：

图1

这个插件类中我们可以接收插件的配置参数，然后需要提供一个apply方法，apply方法有个compiler我们下面的操作都是需要基于webpack的hook来处理，我们知道webpack提供很多内置hook来供开发者按照自己的业务需求去处理一些逻辑。我们想一想我们的需求，在打包完成后扫描.map文件。也就是说我们需要监听的是打包完成后的hook也就是代码里面的done，现在第一步解决了，接下来就是需要扫描我们打包产出的,map文件，我这边是采用golb这个库来获取到所有.map，拿到文件之后，我们就可以开始上传了，我们在options中拿到配置的文件上传地址和参数，然后使用formdata上传，到此我们的上传工作就完成了。那么我们的日志服务器应该怎么处理呢，这边我用express搭建了一个node服务来模拟一下。

图2

项目结构长这个样子，fs-utils里面是一下文件处理方法，然后我们的入口文件在routes下的api.js

图3

这边获取上传的文件然后交给fileUtils去处理

图4

writeFile这边就是将文件写入到source-map文件夹下面。到此我们就和前面两篇完美的闭环了。

其实到了这一步还并不完美，比如我们上传的时候可以采用压缩包上传以减少带宽等等。我这边也是写了一个压缩.map文件到压缩包的插件

图5

插件的结构是这样的，index.js是插件的入口文件和上面上传的插件是一样的，我们压缩完成后，需要告诉外部然后继续执行一些别的操作，这边采用自定义hook来实现也就是我们的hook文件夹

图6

这个类封装了自定义hook的方法，接下来我们在入口文件里去自定义一个hook

图7

这样我们就可以在别的插件中去监听zipDone 从而拿到压缩文件地址。

接下来我们说压缩的逻辑，我们先将.map文件写入一个临时文件夹，然后采用compressing库将整个文件夹压缩为.tar文件然后再将临时文件夹删除

图8

这样我们的压缩工作就完了。

这两个插件我已经发布到了npm有需要的可以自取：

https://www.npmjs.com/package/upload-source-map-plugin

https://www.npmjs.com/package/zip-map-file-plugin