Archivos Javascript .map - mapas fuente javascript

Recientemente, he visto archivos con .js.mapextensión enviados con algunas bibliotecas de JavaScript (como Angular ), y eso solo generó algunas preguntas en mi cabeza:

• ¿Para qué sirve? ¿Por qué los chicos de Angular se preocupan por entregar un .js.maparchivo?
• ¿Cómo puedo (como desarrollador de JavaScript) usar el angular.min.js.maparchivo?
• ¿Debería importarme crear .js.maparchivos para mis aplicaciones JavaScript?
• ¿Cómo se crea? Eché un vistazo angular.min.js.mapy estaba lleno de cadenas de formato extraño, así que supongo que no se creó manualmente.

Los .maparchivos son para jsy css(y ahora tstambién) archivos que han sido minificados. Se llaman SourceMaps. Cuando minimiza un archivo, como el archivo angular.js, toma miles de líneas de código bonito y lo convierte en solo unas pocas líneas de código feo. Con suerte, cuando envía su código a producción, está usando el código minificado en lugar de la versión completa y no minificada. Cuando su aplicación está en producción y tiene un error, el mapa fuente lo ayudará a tomar su archivo feo y le permitirá ver la versión original del código. Si no tuviera el mapa fuente, cualquier error parecería críptico en el mejor de los casos.

Lo mismo para los archivos CSS. Una vez que toma un archivo SASS o LESS y lo compila en CSS, no se parece en nada a su forma original. Si habilita los mapas de origen, puede ver el estado original del archivo, en lugar del estado modificado.

Entonces, para responder sus preguntas en orden:

• ¿Para qué sirve? Para desreferenciar el código uglified
• ¿Cómo puede usarlo un desarrollador? Lo usa para depurar una aplicación de producción. En el modo de desarrollo, puede usar la versión completa de Angular. En producción, usarías la versión minificada.
• ¿Debería importarme crear un archivo js.map? Si le interesa poder depurar el código de producción más fácilmente, entonces sí, debe hacerlo.
• ¿Cómo se crea? Se crea en el momento de la construcción. Existen herramientas de compilación que pueden compilar su archivo .map por usted, al igual que otros archivos. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Espero que esto tenga sentido.

Solo quería centrarme en la última parte de la pregunta; ¿Cómo se crean los archivos de mapa fuente? enumerando las herramientas de compilación que sé que pueden crear mapas de origen.

1. Grunt : usando el complementogrunt-contrib-uglify
2. Gulp : usando el complementogulp-uglify
3. Cierre de Google : usando el parámetro--create_source_map

• ¿Cómo puede usarlo un desarrollador?

No encontré respuesta para esto en los comentarios, aquí es cómo se puede usar:

1. No vincule su archivo js.map en su archivo index.html (no es necesario)

2. Las herramientas de minifiación (buenas) agregan un comentario a su archivo .min.js :

   // # sourceMappingURL = yourFileName.min.js.map

que conectará tu archivo .map .

Cuando los archivos min.js y js.map están listos ...

3. Chrome: abra las herramientas de desarrollo , navegue a la pestaña Fuentes , verá la carpeta de fuentes , donde se guardan los archivos de aplicaciones no minimizadas.

El archivo de mapa asigna el archivo no minificado al archivo minificado. Si realiza cambios en el archivo no minificado, los cambios se reflejarán automáticamente en la versión minificada del archivo.

Solo para agregar a cómo usar los archivos de mapa. Uso chrome para ubuntu y si voy a las fuentes y hago clic en un archivo, si hay un archivo de mapa, aparece un mensaje que me dice que puedo ver el archivo original y cómo hacerlo.

Para los archivos angulares con los que trabajé hoy, hago clic en

Ctrl-P y una lista de archivos originales aparece en una pequeña ventana.

Luego puedo examinar la lista para ver el archivo que me gustaría inspeccionar y verificar dónde podría estar el problema.