JavaScript的 sourcemap 的理解

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

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

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

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

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

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

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

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

　

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

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

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