javascript - example - title marker google maps

Javascript.map archivos-mapas fuente de javascript

Question

Recientemente, he visto archivos con la extensión .js.map incluida con algunas bibliotecas de JavaScript (como Angular ), y eso solo me hizo plantear algunas preguntas:

• ¿Para qué sirve? ¿Por qué a los chicos de Angular les importa entregar un archivo .js.map ?
• ¿Cómo puedo (como desarrollador de JavaScript) usar el archivo angular.min.js.map ?
• ¿Debo preocuparme por crear archivos .js.map para mis aplicaciones JavaScript?
• ¿Cómo se crea? angular.min.js.map un vistazo a angular.min.js.map y estaba lleno de cadenas de formato extraño, así que supongo que no se crea manualmente.

Answer 1

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

Answer 2

Los archivos .map son para archivos js y css (y ahora también para ts ) 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 lo convierte en solo unas pocas líneas de código feo. Con suerte, cuando está enviando su código a producción, está usando el código minificado en lugar de la versión completa, no minada. Cuando su aplicación está en producción y tiene un error, el mapa de origen ayudará a capturar su archivo feo y le permitirá ver la versión original del código. Si no tuviera el mapa de origen, cualquier error parecería críptico en el mejor de los casos.

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

Por lo tanto, para responder a sus preguntas en orden:

• ¿Para qué sirve? Para desviar el código uglified
• ¿Cómo puede un desarrollador usarlo? Lo usas para depurar una aplicación de producción. En el modo de desarrollo puedes usar la versión completa de Angular. En producción, usarías la versión minificada.
• ¿Debo preocuparme por crear un archivo js.map? Si le interesa poder depurar el código de producción más fácilmente, entonces sí, debería hacerlo.
• ¿Cómo se crea? Se crea en tiempo de construcción. Existen herramientas de compilació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.

Answer 3

Sólo para agregar a cómo utilizar los archivos de mapas. Utilizo Chrome para Ubuntu y si voy a 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.

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

Luego puedo navegar a través de la lista para ver el archivo que me gustaría inspeccionar y verificar dónde podría estar el problema.

Answer 4

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 conozco que pueden crear mapas de origen.

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

No sé si hay otras herramientas que pueden crear mapas de origen.

Answer 5

• ¿Cómo puede un desarrollador usarlo? No encontré respuesta para esto en los comentarios, aquí está cómo se puede usar:

  1. No vincule su archivo js.map en su archivo index.html (no es necesario)
  2. Las herramientas de minifiacación (buenas) agregan un comentario a su archivo .min.js: // # sourceMappingURL = suNombreDeArchivo.min.js.map, que conectará su archivo .map

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

3. Chrome: abra dev-tools, vaya a la pestaña ''Fuentes'', verá la carpeta ''fuentes'', donde se guardan los archivos de aplicaciones sin minifide