|
|
Publicado em 30/06/2022 20:04:02
|
|
|
|
Requisitos: Implante o código do projeto front-end (Angular, vue) no ambiente de produção, e o projeto está emO processo de compilação comprime e ofusca o códigoSe um arquivo de mapa for gerado durante a compilação, podemos usar o arquivo de mapa para localizar a localização do arquivo de origem.
O que é o Sourcemap?
Um sourcemap é essencialmente um arquivo de informação que armazena as informações de localização correspondentes antes e depois da conversão de código. Ele registra a localização do código-fonte antes da conversão, correspondente ao código comprimido, e é um mapeamento entre o código-fonte e o código de produção. O Sourcemap resolve o problema de que, durante o processo de empacotamento, o código é comprimido, desespacado, compilado e transformado, resultando na impossibilidade de depuração devido às grandes diferenças entre os códigos.
O papel do Sourcemap
Simplificando, o Sourcemap constrói uma ponte entre o pré-processamento e o pós-processamento do código, facilitando a localização de onde ocorrem bugs em produção. Como o desenvolvimento front-end atual é modular e baseado em componentes, mesclar e comprimir arquivos JS e CSS antes de serem lançados pode facilmente causar confusão. A função do sourceMap é permitir que o painel de depuração do navegador mapeie o código gerado para o arquivo do código-fonte, e os desenvolvedores podem depurar o arquivo do código-fonte, o que tornará a depuração muito mais fácil e simples para os programadores.
Primeiro, crie um novo projeto Angular e escreva um pedaço de código problemático.
O código html é o seguinte:
O código TS é o seguinte:
Na fase de desenvolvimento, se houver um erro, é muito fácil localizar o local errado, como mostrado na figura abaixo:
Construa o projeto em um pacote de lançamento e gere um arquivo de mapa com o seguinte comando:
Implante o arquivo resultante em um servidor HTTP, como IIS, Nginx, etc. entretantoMova o arquivo do mapa para um diretório diferente, conveniente para testes.
Neste momento, não conseguimos ver intuitivamente a mensagem de erro e o código-fonte, instalamos a "Source Code Locator Tool" com o seguinte comando:
Introdução de parâmetros:
Usage: sl [options]
Options:
-v, --versão de saída do número da versão
-p, --source-flie-path O arquivo fonte gerado compilava o arquivo de mapas
-l, --ine O número da linha na fonte gerada da linha de código compilada
-c, --coluna O número da coluna na fonte gerada
-h, --ajuda informações de uso de saída
(Fim)
|
Anterior:Extraia todo o texto de um arquivo PDF usando C# (suporta .NET Core)Próximo:Conhecimento front-end de JavaScript comumente referido como ES6, ES8, ES 2017, ECMAScript
|
Publicado em 30/06/2022 21:36:37