Arquivos .map Javascript - mapas de fontes javascript


357

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.

Respostas:


550

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.


19
Observe que o arquivo do mapa não será enviado até que você chamá-lo, que é o que fez me confundiu stackoverflow.com/a/27196201/861487
Abdelouahab

2
Obrigado Aaron, esta é uma das melhores descrições que eu já vi para o sourcemap. Estou usando-o no gulp e aprendi quase tudo sobre o gulp e fiquei imaginando exatamente como os mapas de origem estavam sendo usados. Agora posso me sentir confiante ao usá-lo. A maioria dos plugins gulp agora também é compatível com um ano atrás, quando alguns não eram. Só queria dizer que faz total sentido!
precisa saber é o seguinte

@frosty Para des-referenciar código uglificado . Você pode explicar isso, por favor? Um .js.maparquivo não mantém uma relação (muitas vezes chamada de referência ) entre o arquivo artesanal e um arquivo compactado?
Mohammed Zameer

11
@ aluno diz de-referência porque eu não quero fazer referência ao código minificado. É minificado e, se eu olhar, é quase inútil. Mas, se pudesse fazer a referência de volta à fonte original, isso seria épico. E é exatamente isso que é um mapa de origem. Espero que ajude.
gelado

Eu amo essa resposta (obrigado), mas tem 420 curtidas ... eu quebro?
Eric Reed


31
  • 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 ...

  1. 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.

14

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.


2

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.