{"id":231533,"date":"2022-12-18T16:13:00","date_gmt":"2022-12-18T13:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231533"},"modified":"2022-12-07T10:00:56","modified_gmt":"2022-12-07T07:00:56","slug":"cosa-sono-le-mappe-sorgente-e-sono-necessarie","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/cosa-sono-le-mappe-sorgente-e-sono-necessarie\/","title":{"rendered":"Cosa sono le mappe sorgente (e sono necessarie)?"},"content":{"rendered":"<p>Se lavori sul front-end di un sito a qualsiasi titolo, che si tratti di un plug-in, un tema o anche qualcosa al di fuori di WordPress, probabilmente stai lavorando con strumenti di minimizzazione.<\/p>\n<p>I vantaggi sono evidenti, giusto?<\/p>\n<ul>\n<li>riduce il carico utile,<\/li>\n<li>ci permette di concentrarci sullo sviluppo nei nostri ambienti locali<\/li>\n<\/ul>\n<p>Ma una delle caratteristiche che derivano dall&#8217;utilizzo di queste tecnologie \u00e8 la capacit\u00e0 di generare mappe di origine.<\/p>\n<p>E questo solleva una domanda (o forse due): cosa sono le mappe sorgente? E sono anche necessari?<\/p>\n<p>Puoi affermare che \u00e8 tardi per parlare di questo, ma ci sono sempre persone che entrano nel settore che potrebbero non conoscere questo materiale.<\/p>\n<p>Allora perch\u00e9 non coprirlo?<\/p>\n<h2>Cosa sono le mappe di origine?<\/h2>\n<p>In breve, le mappe dei sorgenti sono un modo per i browser moderni di prendere il codice minimizzato e permetterci di leggere il codice nel suo stato non minimizzato.<\/p>\n<p>Ad esempio, in un progetto su cui ho lavorato, ho un semplice file, <strong>plugin-setting.scss<\/strong>, che viene minimizzato in <strong>plugin-setting.css<\/strong>. Questo file viene <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">quindi accodato da WordPress<\/a>.<\/p>\n<p>Tuttavia, ho anche il mio strumento di creazione che genera una mappa di origine. Ci\u00f2 significa che ho anche un file chiamato <strong>plugin-settings.css.map<\/strong>.<\/p>\n<p>Quindi il codice fornito con il plugin <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-00-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e8 simile a questo:<\/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>Ma se visualizzato nello strumento di debug del browser <a href=\"https:\/\/gist.github.com\/tommcfarlin\/009eaf48e297d92e5ee7e3df3b89c5db#file-01-plugin-settings-css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">appare cos\u00ec:<\/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 le mappe sorgente possono essere generate sia per i fogli di stile che per JavaScript.<\/p>\n<h2>Sono necessari?<\/h2>\n<p>Non posso dare un s\u00ec o un no specifico a questo; tuttavia, ho scoperto che pi\u00f9 a lungo lavoro in questo settore e sui progetti li trovo molto pi\u00f9 utili dell&#8217;alternativa (che di solito \u00e8 l&#8217;accodamento dello stile non minimizzato a scopo di debug).<\/p>\n<p>Ti consiglio di generarli e includerli perch\u00e9 semplifica il debug. Ma se sono necessari o meno dipende da te o dal tuo team.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>le mappe dei sorgenti sono un modo per i browser moderni di prendere il codice minimizzato e permetterci di leggere il codice nel suo stato non minimizzato.<\/p>\n","protected":false},"author":1,"featured_media":234915,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[907,720,844],"tags":[1168],"class_list":["post-231533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-6","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=231533"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231533\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/234915"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=231533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=231533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=231533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}