{"id":231337,"date":"2022-12-18T16:31:00","date_gmt":"2022-12-18T13:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231337"},"modified":"2022-12-07T10:00:59","modified_gmt":"2022-12-07T07:00:59","slug":"o-que-sao-mapas-de-origem-e-sao-necessarios","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/o-que-sao-mapas-de-origem-e-sao-necessarios\/","title":{"rendered":"O que s\u00e3o mapas de origem (e s\u00e3o necess\u00e1rios)?"},"content":{"rendered":"\n<p>Se voc\u00ea trabalha no front-end de um site em qualquer capacidade \u2013 seja para um plugin, um tema ou at\u00e9 mesmo algo fora do WordPress \u2013 provavelmente est\u00e1 trabalhando com ferramentas de minifica\u00e7\u00e3o.<\/p>\n<p>Os benef\u00edcios s\u00e3o \u00f3bvios, certo?<\/p>\n<ul>\n<li>diminui a carga \u00fatil,<\/li>\n<li>nos permite focar no desenvolvimento em nossos ambientes locais<\/li>\n<\/ul>\n<p>Mas um dos recursos que acompanham o trabalho com essas tecnologias \u00e9 a capacidade de gerar mapas de origem.<\/p>\n<p>E isso levanta uma quest\u00e3o (ou talvez duas): O que s\u00e3o mapas de origem? E eles s\u00e3o mesmo necess\u00e1rios?<\/p>\n<p>Voc\u00ea pode afirmar que \u00e9 tarde para o jogo falar sobre isso, mas sempre h\u00e1 pessoas entrando na ind\u00fastria que podem n\u00e3o conhecer esse material.<\/p>\n<p>Ent\u00e3o por que n\u00e3o cobrir?<\/p>\n<h2>O que s\u00e3o mapas de origem?<\/h2>\n<p>Em resumo, os mapas de origem s\u00e3o uma maneira de os navegadores modernos pegarem o c\u00f3digo minificado e nos permitirem ler o c\u00f3digo em seu estado n\u00e3o minificado.<\/p>\n<p>Por exemplo, em um projeto no qual estou trabalhando, tenho um arquivo simples, <strong>plugin-setting.scss<\/strong>, que \u00e9 reduzido para <strong>plugin-setting.css<\/strong>. Este arquivo \u00e9 <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ent\u00e3o enfileirado pelo WordPress<\/a>.<\/p>\n<p>Eu tamb\u00e9m, no entanto, tenho minha ferramenta de constru\u00e7\u00e3o gerando um mapa de origem. Isso significa que tamb\u00e9m tenho um arquivo chamado <strong>plugin-settings.css.map<\/strong>.<\/p>\n<p>Portanto, o c\u00f3digo enviado com o plug-in <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-00-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se parece com isso:<\/a><\/p>\n<pre><code>form label{font-weight:normal}form input[type=\"text\"],form textarea{width:100%}.admin-featurebox{background:#FFF;border:1px solid #CCC;margin:20px 0;padding:10px 20px}\n\n\/*# sourceMappingURL=plugin-settings.css.map *\/<\/code><\/pre>\n<p>Mas quando visualizado na ferramenta de depura\u00e7\u00e3o dos navegadores <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-01-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">fica assim:<\/a><\/p>\n<pre><code>form {\n  label {\n    font-weight: normal;\n  }\n\n  input[type=\"text\"],\n  textarea {\n    width: 100%;\n  }\n}\n\n.admin-featurebox {\n  background:#FFF;\n  border:1px solid #CCC;\n  margin:20px 0;\n  padding:10px 20px;\n}\n<\/code><\/pre>\n<p>E mapas de origem podem ser gerados para folhas de estilo e JavaScript.<\/p>\n<h2>Eles s\u00e3o necess\u00e1rios?<\/h2>\n<p>N\u00e3o posso dar um sim ou n\u00e3o espec\u00edfico a isso; no entanto, descobri que quanto mais tempo trabalho neste setor e em projetos, acho-os muito mais \u00fateis do que a alternativa (que geralmente \u00e9 enfileirar o estilo unminified para fins de depura\u00e7\u00e3o).<\/p>\n<p>Eu recomendo que voc\u00ea os gere e inclua porque facilita a depura\u00e7\u00e3o. Mas se eles s\u00e3o ou n\u00e3o necess\u00e1rios depende de voc\u00ea ou de sua equipe.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>os mapas de origem s\u00e3o uma maneira de os navegadores modernos pegarem o c\u00f3digo minificado e nos permitirem ler o c\u00f3digo em seu estado n\u00e3o minificado.<\/p>\n","protected":false},"author":1,"featured_media":234917,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[909,722,846],"tags":[1170],"class_list":["post-231337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-8","category-desenvolvedor","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/231337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=231337"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/231337\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/234917"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=231337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=231337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=231337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}