JavaScript的 sourcemap 的理解

  当我们在使用vue-cli 开发项目完成后, 就要进行部署,执行npm run build 命令,你会发现它生成.js文件的同时,还会生成一个对应的.map 文件。 当时查了一下, .map 文件的主要作用是,我们对文件进行压缩合并之后, 如果压缩文件出现了报错,我们能够准确地定位到报错的原位置,就是找到报错在没有打包之前的未压缩的文件中的位置。也仅仅是知道概念而已,现在明白了,就记一下。

  现在用vue-cli 创建一个项目,使用它默认的内容就可以了,你也可以制造点错误,比如,随便写几个ajax 请求,接口肯定是不存在的,肯定有错误,如果不写错误,你也可以随便console.log()点东西,以便我们能准确定位到原始文件的位置。这时执行npm run build 命令,你可以看到多了dist文件夹,打开它, 有static 文件夹,再打开,有css 和js 文件夹,在文件夹中,你可以看到压缩的文件和对应的map 文件。

JavaScript的 sourcemap 的理解

  由于压缩后的文件,是要放到服务器上进行部署的,我们还要写点服务器代码,新建一个文件夹vue-node, 再npm init -y 初始化它,再npm install express 安装express 依赖。新建index.js 文件,和public 文件夹。我们把dist 目录中的内容,就是要部署的文件,复制到 public 文件夹中。整个目录如下

JavaScript的 sourcemap 的理解

  这时在 index.js写服务端代码

const express = require('express');
const app = express();

// 主要输出静态文件
app.use(express.static('public'))
app.listen(3000)

  这时nodemon index.js  启动服务器,在浏览器中输入localhost:3000, 可以看到页面,这时打开控制台,接口报错了

JavaScript的 sourcemap 的理解

  getUser 接口报错,报错在header.vue中,点击header.vue, 你看到了原文件中的位置,这就是sourcemap, .map文件的作用,我们知道了错误在源文件中的位置。 点击header.vue 你看到它跳转到了控制台的sources 面板中。

 JavaScript的 sourcemap 的理解

  这时看sources面板的左侧,你发现webpack:// , 点击它,你会看到src,原来这里存放我们的源代码,这也是sourcmap的作用。有了源代码,什么都可以做了,点开我们想要看的源文件,它会显示在右侧,这时我们就可以设置断点,检查文件。

JavaScript的 sourcemap 的理解

  当我们把所有的map文件去掉时,你会发现上面所说的优势都不存在了。我们可以试一下,打开vue-node  下面的public 文件夹,把里面js 和css map文件删掉。这时再刷新浏览器,控制台只看到压缩后的文件JavaScript的 sourcemap 的理解

  点击文件名,进行跳转,跳转到也是压缩的文件,很难debug.

上一篇:Nginx + Tomcat动静分离 (转)


下一篇:1.3 PROGRAM DEVELOPMENT ENVIRONMENT