Vad är källkartor (och behövs de)?

Om du arbetar på front-end av en webbplats i någon kapacitet – vare sig det är för ett plugin, ett tema eller till och med något utanför WordPress – arbetar du troligen med minifieringsverktyg.

Fördelarna är uppenbara, eller hur?

• det minskar nyttolasten,
• det gör att vi kan fokusera på utveckling på våra lokala miljöer

Men en av funktionerna som följer med att arbeta med dessa tekniker och det är möjligheten att generera källkartor.

Och detta väcker en fråga (eller kanske två): Vad är källkartor? Och behövs de ens?

Du kan hävda att det är sent att prata om detta, men det finns alltid människor som kommer in i branschen som kanske inte känner till det här materialet.

Så varför inte täcka det?

Vad är källkartor?

Kort sagt, källkartor är ett sätt för moderna webbläsare att ta den minifierade koden och tillåta oss att läsa koden i dess oförminskade tillstånd.

Till exempel, i ett projekt som jag har arbetat med, har jag en enkel fil, plugin-setting.scss, som förminskas till plugin-setting.css. Den här filen köas sedan av WordPress.

Jag har dock också mitt byggverktyg som genererar en källkarta. Det betyder att jag även har en fil som heter plugin-settings.css.map.

Så koden som levereras med pluginet ser ut så här:

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 */

Men när det visas i webbläsarens felsökningsverktyg ser det ut så här:

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;
}

Och källkartor kan genereras för både stilmallar och JavaScript.

Behövs de?

Jag kan inte ge ett specifikt ja eller nej till detta; Jag har dock märkt att ju längre jag arbetar i den här branschen, och med projekt tycker jag att de är mycket mer användbara än alternativet (som vanligtvis ställer in den oförminskade stilen i felsökningssyfte).

Jag rekommenderar att du genererar dem och inkluderar dem eftersom det gör felsökning enklare. Men om de behövs eller inte är upp till dig eller ditt team.