[EPIC] Mises à jour javascript

etalab / transport-site

Rendre disponible, valoriser et améliorer les données transports

https://transport.data.gouv.fr

190 stars 29 forks source link

[EPIC] Mises à jour javascript #2103

Open thbar opened 2 years ago

thbar commented 2 years ago

J'ai commencé aujourd'hui à mettre quelques librairies à jour, car on commence à avoir de la dette là dessus, et également des alertes sécurité ici:

État de départ

Points à traiter

[x] Première passe de MAJ #2102
[x] MAJ de css-loader avec breaking changes avec Can't resolve 'images/layers.png' in ... etc - traité dans https://github.com/etalab/transport-site/pull/2698

thbar commented 2 years ago

La mise à jour de css-loader de 5 à 6 introduit des changements importants, je partage ce que j'ai compris aujourd'hui :

file-loader qu'on utilise pour les images et les fontes est à remplacer par asset/resource (voir https://webpack.js.org/guides/asset-modules/)
using ~ is deprecated when the esModules option is enabled (enabled by default) and can be removed from your code (we recommend it) (je crois qu'on est peut-être concernés)
voir https://github.com/webpack-contrib/css-loader/releases/tag/v6.0.0 (attention il y a d'autres mises à jour après)

thbar commented 2 years ago

J'ajoute quelques éléments si on devait basculer à esbuild à un moment:

Je note quelques suggestions sur le Slack (merci cmo):

you can use --external:/fonts/* arg on esbuild in config.exs for fonts etc
args: ~w(js/app.js --bundle --target=es2020 --loader:.svg=text --outdir=../priv/static/assets --external:/fonts/* --external:/images/*)