前端工程引入Source Map

原创已于 2024-11-25 22:00:22 修改

· 1k 阅读

20 ·

版权

文章标签：

#前端 #Vue #javascript

于 2024-11-25 21:56:09 首次发布

简单来说，就是让你的前端拥有和后端一样的debug功能

前台JS通过SourceMap引入Debug功能

产生背景

JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。

常见的源码转换，主要是以下三种情况：

（1）压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。
（2）多个文件合并，减少HTTP请求数。
（3）其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

这三种情况，都使得实际运行的代码不同于开发代码，除错（debug）变得困难重重。

通常，JavaScript的解释器会告诉你，第几行第几列代码出错。但是，这对于转换后的代码毫无用处。举例来说，jQuery 1.9压缩后只有3行，每行3万个字符，所有内部变量都改了名字。你看着报错信息，感到毫无头绪，根本不知道它所对应的原始位置。

这就是Source map想要解决的问题。

什么是Source map

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

Source Map使用前，手动出现错误

提示报错行数16，点进去是编译后的js代码，根本不知道报错的源码是什么
在这里插入图片描述

这种情况下，还比较容易找出问题所在
一旦代码行数过多，或者React项目，各种Hooks勾来勾去的情况，对于开发人员来说，想定位到问题是非常困难的，所以就需要引入source map来辅助我们定位问题

Source Map使用后

Chrome内核浏览器开启Source Map功能

打开控制台，点击设置
在这里插入图片描述

在这里插入图片描述

Vue配置，需要安装vue-cli，并且保证package.json中已经导入了依赖
在这里插入图片描述

vue.config.js配置文件中，开启source map

由于source map本身是webpack的功能，所以需要在webpack的配置中进行配置

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    // 其他配置...
	  configureWebpack: {
	  	// 开启source-map
	    devtool: "source-map",
	    //默认值是production，可选值有：'none' 、 'development'、 'production'
	    mode: "development",
	    output: {
	      //将上次的source map文件清除，防止缓存
	      clean: true,
	    },
	  },
	// 其他配置...
})

在这里插入图片描述
这里的 devtool 选项告诉webpack在构建过程中生成source map。source-map 是其中一种选项，它提供了最好的source map，但会使得构建过程变慢。你也可以使用 eval-source-map ，它更快，但eval-source-map的质量不如 source-map 。