Cosa sono le mappe sorgente (e sono necessarie)?

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.

I vantaggi sono evidenti, giusto?

• riduce il carico utile,
• ci permette di concentrarci sullo sviluppo nei nostri ambienti locali

Ma una delle caratteristiche che derivano dall’utilizzo di queste tecnologie è la capacità di generare mappe di origine.

E questo solleva una domanda (o forse due): cosa sono le mappe sorgente? E sono anche necessari?

Puoi affermare che è tardi per parlare di questo, ma ci sono sempre persone che entrano nel settore che potrebbero non conoscere questo materiale.

Allora perché non coprirlo?

Cosa sono le mappe di origine?

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.

Ad esempio, in un progetto su cui ho lavorato, ho un semplice file, plugin-setting.scss, che viene minimizzato in plugin-setting.css. Questo file viene quindi accodato da WordPress.

Tuttavia, ho anche il mio strumento di creazione che genera una mappa di origine. Ciò significa che ho anche un file chiamato plugin-settings.css.map.

Quindi il codice fornito con il plugin è simile a questo:

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}

/*# sourceMappingURL=plugin-settings.css.map */

Ma se visualizzato nello strumento di debug del browser appare così:

form {
  label {
    font-weight: normal;
  }

  input[type="text"],
  textarea {
    width: 100%;
  }
}

.admin-featurebox {
  background:#FFF;
  border:1px solid #CCC;
  margin:20px 0;
  padding:10px 20px;
}

E le mappe sorgente possono essere generate sia per i fogli di stile che per JavaScript.

Sono necessari?

Non posso dare un sì o un no specifico a questo; tuttavia, ho scoperto che più a lungo lavoro in questo settore e sui progetti li trovo molto più utili dell’alternativa (che di solito è l’accodamento dello stile non minimizzato a scopo di debug).

Ti consiglio di generarli e includerli perché semplifica il debug. Ma se sono necessari o meno dipende da te o dal tuo team.