Create React App 2.0 : Babel 7, Sass, et plus encore

2018 M10 1 par Joe Haddad et Dan Abramov

Create React App 2.0 a été publié aujourd’hui, et il apporte l’équivalent d’une année d’améliorations dans une seule mise à jour des dépendances.

Alors que React lui-même ne nécessite aucune dépendance de compilation, il peut être difficile d’écrire une application complexe sans un lanceur de tests rapide, un minifieur de production et une base de code modulaire. Dès sa toute première version, l’objectif de Create React App a été de vous aider à vous concentrer sur ce qui compte le plus—votre code d’application—et de gérer la compilation et la configuration des tests pour vous.

Bon nombre des outils sur lesquels il s’appuie ont depuis publié de nouvelles versions contenant de nouvelles fonctionnalités et des améliorations de performances : Babel 7, Webpack 4, et Jest 23. Cependant, les mettre à jour manuellement et les faire bien fonctionner ensemble demande beaucoup d’efforts. Et c’est exactement ce que les contributeurs à Create React App 2.0 ont été occupés à faire ces derniers mois : migrer la configuration et les dépendances pour que vous n’ayez pas à le faire vous-même.

Maintenant que Create React App 2.0 n’est plus en beta, voyons ce qu’il y a de nouveau et comment vous pouvez l’essayer !

Remarque

Ne vous sentez pas obligé·e de mettre à jour quoi que ce soit. Si vous êtes satisfait·e du jeu de fonctionnalités actuel, de ses performances et de sa fiabilité, vous pouvez continuer à utiliser la version que vous avez actuellement ! Il peut également être une bonne idée de laisser la version 2.0 se stabiliser un peu avant de passer à celle-ci en production.

Quoi de neuf ?

Voici un bref résumé des nouveautés de cette version :

Toutes ces fonctionnalités sont prêtes à l’emploi—pour les activer, suivez les instructions ci-dessous.

Démarrer un projet avec Create React App 2.0

Vous n’avez pas besoin de mettre à jour quoi que ce soit de spécial. A partir d’aujourd’hui, lorsque vous lancez create-react-app il utilisera la version 2.0 du gabrait par défaut. Amusez-vous bien !

Si vous voulez utiliser l’ancien modèle 1.x pour une raison quelconque, vous pouvez le faire en passant --scripts-version=react-scripts@1.x comme argument pour create-react-app.

Mise à jour d’un projet vers Create React App 2.0

La mise à niveau d’un projet non-éjecté vers Create React App 2.0 devrait généralement être facile. Ouvrez package.json à la racine de votre projet et trouvez-y react-scripts.

Puis changez sa version en 2.0.3 :

  // ... autres dépendances ...
  "react-scripts": "2.0.3"

Éxécutez npm install (ou yarn, si vous l’utilisez). Pour de nombreux projets, ce changement d’une seule ligne est suffisant pour la mise à niveau !

Voici quelques autres conseils pour vous aider à démarrer.

Lorsque vous lancez npm start pour la première fois après la mise à niveau, vous obtiendrez une invite vous demandant quels navigateurs vous souhaitez prendre en charge. Appuyez sur y pour accepter les valeurs par défaut. Elles seront écrites dans votre fichier package.json et vous pouvez les éditer à tout moment. Create React App utilisera ces informations pour produire des bundles CSS plus ou moins compatibles selon que vous visez des navigateurs modernes ou plus anciens.

Si npm start ne fonctionne toujours pas pour vous après la mise à jour, consultez les instructions de migration plus détaillées dans les notes de publication. Il y a en effet quelques ruptures de compatibilité ascendante dans cette version, mais leur portée est limitée, donc ils ne devraient pas prendre plus de quelques heures à résoudre. Notez que la prise en charge des anciens navigateurs est maintenant opt-in pour réduire la taille des polyfills.

Si vous avez déjà éjecté mais que vous voulez maintenant mettre à niveau, une solution courante consiste à trouver les commits où vous avez été éjecté (et tous les commits ultérieurs modifiant la configuration), les renverser (au sens git revert), mettre à niveau, puis éventuellement éjecter à nouveau plus tard. Il est également possible que la fonctionnalité pour laquelle vous aviez éjectée (peut-être Sass ou les modules CSS ?) soit maintenant prise en charge de base.

Remarque

En raison d’un bug possible dans npm, vous risquez de voir des avertissements sur les dépendances paires insatisfaites. Vous devriez pouvoir les ignorer. Pour autant que nous le sachions, ce problème n’existe pas avec Yarn.

Ruptures de compatibilité ascendante

Voici une courte liste des ruptures de compatibilité ascendante dans cette version :

  • Node 6 n’est plus pris en charge.
  • La prise en charge des anciens navigateurs (comme IE 9 jusqu’à IE 11) est maintenant opt-in avec un paquet séparé.
  • La découpe de code avec import() suit désormais au plus près la spécification, alors que require.ensure() est désactivé.
  • L’environnement de Jest par défaut inclut maintenant jsdom.
  • La prise en charge de la spécification d’un objet en tant que paramètre proxy a été remplacée par la prise en charge d’un module proxy personnalisé.
  • L’extension .mjs n’est plus prise en charge en attendant que l’écosystème qui l’entoure se stabilise.
  • Les définitions PropTypes sont automatiquement supprimées des builds de production.

Si l’un ou l’autre de ces points vous concerne, les notes de version 2.0.3 contiennent des instructions plus détaillées à leur sujet.

En savoir plus

Vous pouvez trouver le journal complet des modifications dans les notes de publication. Il s’agissait d’une version touffue, et nous avons peut-être raté quelque chose. Veuillez signaler tout problème à notre [outil de suivi des problèmes] (https://github.com/facebook/create-react-app/issues/new) et nous essaierons de vous aider.

Remarque

Si vous avez utilisé des versions alpha 2.x, nous fournissons des [instructions de migration séparées].(https://gist.github.com/gaearon/8650d1c70e436e5eff01f396dffc4114) pour elles.

Remerciements

Cette version ne serait pas possible sans notre merveilleuse communauté de contributeurs. Nous aimerions remercier Andreas Cederström, Clement Hoang, Brian Ng, Kent C. Dodds, Ade Viankakrisna Fadlil, Andrey Sitnik, Ro Savage, Fabiano Brito, Ian Sutherland, Pete Nykänen, Jeffrey Posnick, Jack Zhao, Tobias Koppers, Henry Zhu, Maël Nison, XiaoYan Li, Marko Trebizan, Marek Suscak, Mikhail Osher, et beaucoup d’autres qui ont fourni des commentaires et des tests pour cette version.