前言:
虽然 babel-plugin-transform-remove-console 已经几年不更新了,但打包时去除 console 语句还是比较省时省力,所以项目中也就用了,没想到反而费劲了
本来问题很简单,但有时候不细心,可能就会浪费大量的时间解决问题,所以写篇博客,方便他人
急急如律令,喷子请绕行
1、安装和使用
安装
npm i babel-plugin-transform-remove-console
配置(babel.config.js)
// 存储项目发布阶段需要用到的插件
const productPlugins = []
// 如果用户运行的是打包命令(npm run build)则向数组中注入插件
if (process.env.NODE_ENV === 'production') {
//发布阶段
productPlugins.push("transform-remove-console")
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
...productPlugins
]
}
此时,使用 npm run build
命令打包就会移除文件中的 console 语句,经过测试,确实是这样
2. 删除 map 文件
后来,为了进一步减少 dist 目录的体积,决定将 productionSourceMap 设为 false,目的是打包时不生成 map 映射文件,这个过程就除了问题
2.1 什么是 map 文件?
先看一下,默认情况下生成的 dist 目录
- 4 个 js 文件,4个 map 文件
- js 目录一共14M,4个map文件占了11M
这几个 map 文件到底是干什么的呢?
其主要作用就是在打包之后的js文件与打包之前的源代码文件之间建立映射,这样虽然打包前后的代码看起来不一样,但当运行时发生错误时,仍然可以定位到发生错误的源文件
下面我们来演示看看
比如,我们故意在 App.vue 中计入如下代码
methods: {
f1() {
return a + 5
},
},
created() {
this.f1()
},
开发模式下,运行页面,报错信息如下
点击出错的文件,还可以直接定位
项目打包之后呢?
我们打包之后,在运行代码,发现控制台中一篇空白,不是说只要打包后有 map 文件,发生错误后,不仅会在控制台打印错误,还能定位到错误的源文件吗?
2.2 消失的 console
思考一下,当程序报错后,控制台中的错误信息是由谁输出的?
比如下面的错误,提示 a is not defined
很显然,是由 vue 通过 console.error 在控制台打印的
但我们查看上面看到的4个js文件和4个map文件后发现,没有任何一条 console 语句,为什么?
原因很清除,就是包括开发者自己编写的console语句和程序引入的一些依赖中的 console语句,都被 babel-plugin-transform-remove-console 插件移除了
原来 babel-plugin-transform-remove-console 插件可以删除所有文件中的 console 语句(这不是理所当然的吗)
2.3 如何解决
其实,官方文档早就说了
所以,修改 babel.config.js 中配置,为删除添加例外,这样所有文件中的 console.error 和 console.warn 就保留了
此时,可以查看打包生成的 js 和 map 文件中,充斥着大量的上面两种语句
重新打包后,再次运行
发现果然输出错误了,而且提示错误发生在哪个源文件
2.4 取消 map 文件
最后,可以取消生成 map 文件了
vue.config.js 中
重新打包,然后运行,仍然包括,但已经无法定位到具体发生错误的源文件了,而是生成之后的文件
仔细查看 dist/js 目录,发现已经没有 map 文件了,当然dist 目录的体积小了很多
客户端请求时,也不会下载 map 文件,所以速度也会有所提升
3. 总结
babel-plugin-transform-remove-console 插件的使用本来非常简单,但如果细翻大家的帖子,好像都是同一个模板拷贝过来的,居然都很少有人提及 exclude 属性的作用,如果是个新人碰到类似上面的问题,可能就会花费大量时间解决,所以写这篇博客,方便他人