Que sont les cartes sources (et sont-elles nécessaires) ?

Si vous travaillez sur le front-end d’un site à quelque titre que ce soit – que ce soit pour un plugin, un thème ou même quelque chose en dehors de WordPress – vous travaillez probablement avec des outils de minification.

Les avantages sont évidents, non ?

• cela diminue la charge utile,
• il nous permet de nous concentrer sur le développement de nos environnements locaux

Mais l’une des fonctionnalités qui accompagnent l’utilisation de ces technologies, c’est la possibilité de générer des cartes sources.

Et cela soulève une question (ou peut-être deux) : que sont les cartes sources ? Et sont-ils même nécessaires?

Vous pouvez prétendre qu’il est tard pour en parler, mais il y a toujours des gens qui entrent dans l’industrie et qui ne connaissent peut-être pas ce matériel.

Alors pourquoi ne pas le couvrir ?

Que sont les cartes sources ?

En bref, les cartes source sont un moyen pour les navigateurs modernes de prendre le code minifié et de nous permettre de lire le code dans son état non minifié.

Par exemple, dans un projet sur lequel j’ai travaillé, j’ai un fichier simple, plugin-setting.scss, qui est minifié en plugin-setting.css. Ce fichier est ensuite mis en file d’attente par WordPress.

Cependant, mon outil de construction génère également une carte source. Cela signifie que j’ai également un fichier appelé plugin-settings.css.map.

Ainsi, le code fourni avec le plugin ressemble à ceci :

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

Mais lorsqu’il est affiché dans l’outil de débogage des navigateurs, il ressemble à ceci :

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

Et les cartes source peuvent être générées pour les feuilles de style et JavaScript.

Sont-ils nécessaires ?

Je ne peux pas donner un oui ou un non précis à cela; cependant, j’ai trouvé que plus je travaille longtemps dans cette industrie, et sur des projets, je les trouve beaucoup plus utiles que l’alternative (qui consiste généralement à mettre en file d’attente le style non minifié à des fins de débogage).

Je vous recommande de les générer et de les inclure car cela facilite le débogage. Mais qu’ils soient nécessaires ou non dépend de vous ou de votre équipe.