Arquivos .map Javascript - mapas de fontes javascript

Recentemente, vi arquivos com .js.mapextensão enviados com algumas bibliotecas JavaScript (como Angular ), e isso apenas levantou algumas questões na minha cabeça:

• Para que serve? Por que os funcionários da Angular se preocupam em entregar um .js.maparquivo?
• Como posso (como desenvolvedor de JavaScript) usar o angular.min.js.maparquivo?
• Devo me preocupar em criar .js.maparquivos para meus aplicativos JavaScript?
• Como é criado? Dei uma olhada angular.min.js.mape ela estava cheia de strings de formato estranho, então suponho que não foi criada manualmente.

Os .maparquivos são para jse css(e agora tstambém) arquivos que foram minificados. Eles são chamados de SourceMaps. Quando você reduz um arquivo, como o arquivo angular.js, ele pega milhares de linhas de código bonito e o transforma em apenas algumas linhas de código feio. Felizmente, ao enviar seu código para produção, você está usando o código minificado em vez da versão completa e não minificada. Quando o aplicativo está em produção e apresenta um erro, o mapa de origem ajuda a obter seu arquivo feio e permite que você veja a versão original do código. Se você não tivesse o mapa de origem, qualquer erro pareceria enigmático.

O mesmo para arquivos CSS. Depois de pegar um arquivo SASS ou MENOS e compilá-lo em CSS, ele não se parece em nada com sua forma original. Se você ativar mapas de origem, poderá ver o estado original do arquivo, em vez do estado modificado.

Então, para responder às perguntas em ordem:

• Para que serve? Para des-referenciar código uglificado
• Como um desenvolvedor pode usá-lo? Você o usa para depurar um aplicativo de produção. No modo de desenvolvimento, você pode usar a versão completa do Angular. Na produção, você usaria a versão minificada.
• Devo me preocupar em criar um arquivo js.map? Se você se preocupa em poder depurar o código de produção com mais facilidade, sim, deve fazê-lo.
• Como é criado? É criado no momento da construção. Existem ferramentas de criação que podem criar o arquivo .map para você, assim como outros arquivos. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Espero que isto faça sentido.

Só queria focar na última parte da pergunta; Como os arquivos de mapas de origem são criados? listando as ferramentas de construção que eu sei que podem criar mapas de origem.

1. Grunt : usando o plugingrunt-contrib-uglify
2. Gulp : usando o plugingulp-uglify
3. Encerramento do Google : usando o parâmetro--create_source_map

• Como um desenvolvedor pode usá-lo?

Não encontrei resposta para isso nos comentários, aqui está como pode ser usado:

1. Não vincule seu arquivo js.map ao arquivo index.html (não é necessário)

2. As ferramentas de minifactação (boas) adicionam um comentário ao seu arquivo .min.js .

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

que conectará seu arquivo .map .

Quando os min.js e js.map arquivos estão prontos ...

3. Chrome: abra as ferramentas de desenvolvimento , navegue até a guia Fontes , você verá a pasta de fontes , onde arquivos de aplicativos não minificados são mantidos.

O arquivo de mapa mapeia o arquivo não minificado para o arquivo minificado. Se você fizer alterações no arquivo não minificado, as alterações serão refletidas automaticamente na versão minificada do arquivo.

Apenas para adicionar como usar arquivos de mapa. Eu uso o chrome para o ubuntu e, se eu for para fontes e clicar em um arquivo, se houver um arquivo de mapa, uma mensagem será exibida informando que eu posso ver o arquivo original e como fazê-lo.

Para os arquivos angulares com os quais trabalhei hoje, clico

Ctrl-P e uma lista de arquivos originais aparecem em uma pequena janela.

Posso navegar pela lista para visualizar o arquivo que gostaria de inspecionar e verificar onde o problema pode estar.