Source Map 的原理

来源映射的原理是建立原始程式码和转换后的程式码之间的映射关係，以便在开发和调试过程中能够追蹤到转换后的程式码到原始程式码的对应关係。这允许开发人员在调试压缩、转换或编译后的程式码时，仍然能够理解并操作原始程式码。来源映射工作的基本原理如下：

**来源产生映射档：**当进行程式码转换（例如，JavaScript程式码压缩、CSS压缩程式码、TypeScript到JavaScript的编译等）时，编译工具或建置系统会产生一个来源映射档。该档案通常以副档名结尾，.map例如main.js.map。

**映射记录：**在来源映射档案中，会记录原始程式码与转换后的程式码之间的对应。关係这些映射关係包括原始程式码的档案路径、行号、列号，以及对应的转换后的程式码档案路径、行号、列号。

**来源映射工具支援：**开发工具（如浏览器开发者工具、文字编辑器等）需要支援来源映射文件。当开发人员在开发工具中开启转换后的程式码档案时，工具会检查是否存在来源映射文件，如果存在，工具会载入它并使用其中的映射关係。

**侦错与分析：**当开发人员在开发工具中进行侦错时，工具利用来源映射档案中的映射关係将断点、变数和错误讯息关联到原始程式码中的对应位置。这样，开发人员就可以在原始程式码中设定断点、单步执行程式码，并查看原始程式码中的变数和堆叠追蹤资讯。

**错误报告：**如果在转换后的中发生错误，来源映射档案可以帮助将错误报告映射程式码回溯到原始程式码，从而更容易理解和修复错误。

总的来说，来源映射的原理能够对原始程式码和转换后的程式码之间的关係进行精确记录，并在开发工具中实现这种关係，以便在开发和调试过程中提供更好的开发体验。这对于在Web 开发中处理压缩、混乱和编译后的程式码非常有用。