|
|
Publicado en 30/6/2022 20:04:02
|
|
|
|
Requisitos: Desplega el código del proyecto front-end (Angular, vue) en el entorno de producción, y el proyecto está enEl proceso de compilación comprime y oscurece el códigoSi se genera un archivo de mapa durante la compilación, podemos usar ese archivo para localizar la ubicación del archivo fuente.
¿Qué es Sourcemap?
Un sourcemap es esencialmente un archivo de información que almacena la información de ubicación correspondiente antes y después de la conversión de código. Registra la ubicación del código fuente antes de la conversión correspondiente al código comprimido, y es un mapeo entre el código fuente y el código de producción. Sourcemap resuelve el problema de que durante el proceso de empaquetado, el código se comprime, desespacia y compila y transforma, lo que resulta en la imposibilidad de depurar debido a las grandes diferencias entre los códigos.
El papel de Sourcemap
En pocas palabras, Sourcemap crea un puente entre el preprocesamiento y el postprocesado del código, facilitando localizar dónde aparecen los errores en producción. Como el desarrollo front-end actual es modular y basado en componentes, fusionar y comprimir archivos JS y CSS antes de lanzarse puede causar fácilmente confusión. La función de sourceMap es permitir que el panel de depuración del navegador mape el código generado al archivo fuente, y los desarrolladores pueden depurar en el archivo fuente, lo que facilitará y simplificará mucho la depuración para los programadores.
Primero, crea un nuevo proyecto Angular y escribe un fragmento de código problemático.
El código html es el siguiente:
El código TS es el siguiente:
En la fase de desarrollo, si hay un error, es muy fácil localizar la ubicación equivocada, como se muestra en la figura siguiente:
Integra el proyecto en un paquete de lanzamiento y genera un archivo de mapa con el siguiente comando:
Despliega el archivo resultante en un servidor HTTP, como IIS, Nginx, etc. entretantoMueve el archivo de mapa a otro directorio, conveniente para probar.
En este momento, no podemos ver el mensaje de error ni el código fuente de forma intuitiva, instalamos la "Herramienta Localizador de Código Fuente" con el siguiente comando:
Introducción de parámetros:
Usage: sl [options]
Options:
-v, --versión que genera el número de versión
-p, --source-flie-path El archivo fuente generado compilaba el archivo de mapa
-l, --ine El número de línea en la línea de código compilada de código fuente generada
-c, --columna El número de columna en la fuente generada
-h, --ayuda información de uso de salida
(Fin)
|
Anterior:Extrae todo el texto de un archivo PDF usando C# (soporta .NET Core)Próximo:Conocimiento front-end de JavaScript comúnmente conocido como ES6, ES8, ES 2017, ECMAScript
|
Publicado en 30/6/2022 21:36:37