Saltar al contenido

¿Cómo usar los mapas fuente de JavaScript (archivos .map)?

Revisamos exhaustivamente cada reseña de nuestra página web con la meta de mostrarte siempre información certera y actualizada.

Solución:

los .map los archivos son para js y css (y ahora ts también) archivos que han sido minimizados. Se llaman SourceMaps. Cuando minimiza un archivo, como el archivo angular.js, toma miles de líneas de código bonito y las convierte en solo unas pocas líneas de código feo. Con suerte, cuando envía su código a producción, está utilizando el código minimizado en lugar de la versión completa sin minimizar. Cuando su aplicación está en producción y tiene un error, el mapa fuente ayudará a tomar su archivo feo y le permitirá ver la versión original del código. Si no tuviera el mapa fuente, entonces 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 código feo
  • ¿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ía la versión minimizada.
  • ¿Debería preocuparme por 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 compilación. Hay herramientas de construcción que pueden construir su archivo .map para usted como lo hace con 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 mapas de origen? al enumerar las herramientas de compilación que sé que pueden crear mapas de origen.

  1. Grunt: usando el complemento grunt-contrib-uglify
  2. Gulp: usando el complemento gulp-uglify
  3. Cierre de Google: usando parámetro --create_source_map

  • ¿Cómo puede usarlo un desarrollador?

No encontré respuesta para esto en los comentarios, así es como se puede usar:

  1. no vincular su archivo js.map en su archivo index.html (no es necesario)
  2. Las herramientas de minifiacación (buenas) añaden un comentario a tu .min.js expediente:

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

que conectará su .mapa expediente.

Cuando el min.js y js.mapa los archivos estan listos…

  1. cromo: abierto herramientas de desarrollonavegar a Fuentes pestaña, verás fuentes carpeta, donde se guardan los archivos de aplicaciones no minificados.

Nos puedes añadir valor a nuestro contenido participando con tu veteranía en las observaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *