SourceMap详解

SourceMap 介绍

我们写的项目最终被打包部署到生产环境上，运行在浏览器上的代码跟我们开发环境的代码肯定不一样：

• ES6 可能会被转换成 ES5
• 将代码进行丑化压缩后，变量名称肯定会被修改
• 我们使用的 TypeScript 最终会被转换成 JavaScript

这样就出现了一个问题，在生产环境下运行的代码，如果浏览器进行了报错，则会显示 bundle.js 中错误的位置，这样很难定位到我们开发环境中出现问题的代码，那么「 如何调试开发环境中的代码呢？ 」，这时就需要用到 source-map，它的作用是：

• 将生产环境的代码（打包后的代码）和开发环境的代码产生映射关系
• 帮助我们在生产环境中定位开发环境下的代码 BUG