¿Qué son los mapas fuente en Javascript? ¿Cómo trabajan ellos? ¿Y por qué debería importarme?

Los mapas de origen TL; DR son archivos que asignan sus archivos compilados a sus archivos de código fuente original.

Por lo general, cuando implementa en producción sus archivos Javascript, desea optimizarlos. Entonces realiza un conjunto de cambios para hacer eso. Los minimiza, destroza, comprime, etc. Si escribe en un lenguaje que “compila” a Javascript, desea hacer lo mismo, pero antes de eso tiene que transpilar (transformar el código que ha escrito en algún idioma como Typecript, Coffeescript , Clojurescript, Elm, lo que sea) en código Javascript.

Todo esto es genial, excepto cuando comienza a depurar. No desea tratar con algunos nombres de variables extraños o algún código escrito por máquina. Desea poder depurar su código original. Aquí es donde entran los mapas de origen. Estos archivos mantienen referencias a su código original. Entonces, cuando inspeccione utilizando el inspector del navegador, se lo llevará a su código original.

Por ejemplo, si tiene su código original:

‘uso estricto’;

suma de funciones (uno, dos) {
devuelve uno + dos;
}

var s = suma (3, 4);

y tu código optimizado

función s (u, r) {return u + r} var q = s (3,4)

el archivo de mapa fuente mantendrá una referencia del nombre `s` a` sum`. De esta manera, cuando use las herramientas de desarrollador, podrá ver la `suma` real en la línea 3 y no el único delineador con la` s`.

Puede generar estos archivos (mapas de origen) cuando realiza la optimización / transpilación. Hay muchas bibliotecas que pueden hacer eso.

Si desea conocer otros detalles, lea Introducción a los mapas fuente de JavaScript.