Archivos Javascript .map - mapas fuente javascript


357

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.

Respuestas:


551

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.


19
tenga en cuenta que el archivo de mapa no se enviará hasta que lo llame, eso es lo que me confundió stackoverflow.com/a/27196201/861487
Abdelouahab

2
Gracias Aaron, esta es una de las mejores descripciones que he visto para el mapa fuente. Lo estoy usando en trago y había aprendido casi todo sobre trago y me preguntaba exactamente cómo se usaban los mapas fuente, ahora puedo sentirme seguro al usarlo. La mayoría de los complementos de Gulp son compatibles ahora también hace un año, cuando algunos no lo eran. ¡Solo quería decir que tiene mucho sentido!
Eric Bishard

@frosty Para desreferenciar el código uglified . ¿Puedes explicar esto por favor? ¿Un .js.maparchivo no mantiene una relación (a menudo llamada referencia ) entre un archivo hecho a mano y un archivo minificado?
Mohammed Zameer

1
@student dice desreferencia porque no quiero hacer referencia al código minificado. Está minimizado y, si lo miro, casi no tiene valor. Pero, si pudiera desreferenciarlo de nuevo a la fuente original, eso sería épico. Y eso es exactamente lo que es un mapa fuente. Espero que eso ayude.
helado

Me encanta esta respuesta (gracias), pero tiene 420 me gusta ... ¿la rompo?
Eric Reed


31
  • ¿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 ...

  1. 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.

14

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.


2

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.