Récemment, j'ai commencé à travailler sur le pack web et les react-scripts et je voudrais connaître les avantages et les inconvénients de leur utilisation et comment ils sont différents les uns des autres.
Réponses
Trop de publicités?
En gros, ils servent des objectifs différents et apparaissent généralement ensemble. Je vais vous expliquer ce qu'ils sont censés faire.
babel
Babel est un transpilateur. Il peut traduire toutes sortes d'ECMAScript haute version ( pas seulement ECMAScript, mais il est facile à comprendre) en ES5, qui est plus largement supporté par les navigateurs (surtout les anciennes versions). Sa tâche principale est de transformer les fonctionnalités du langage non supportées ou de pointe en ES5.
Webpack
Webpack est, entre autres, un analyseur de dépendances et un regroupeur de modules. Par exemple, si le module A nécessite B comme dépendance, et le module B nécessite C comme dépendance, alors webpack générera une carte de dépendance comme C -> B -> A. En pratique, c'est beaucoup plus compliqué que cela, mais le concept général est que Webpack regroupe les modules avec des relations de dépendance complexes dans des paquets. Concernant la relation de webpack avec babel : Lorsque webpack traite les dépendances, il doit tout transformer en javascript car webpack travaille au-dessus de javascript. Par conséquent, il utilise différents chargeurs pour traduire différents types de ressources/code en javascript. Lorsque nous avons besoin de fonctionnalités ES6 ou ES7, nous utilisons babel-loader pour y parvenir.
react-scripts
Lorsque nous commençons un projet basé sur react, la mise en place de l'environnement de construction est un travail difficile et long. Pour aider à cela, les développeurs de React ont créé un paquet npm appelé react-scripts qui comprend une grande partie de la configuration de base dont la plupart des gens auront besoin pour une application React moyenne. Babel et webpack sont inclus comme dépendances dans react-scripts
Vladislav Ihost
Points
893
WebPack et react-scripts sont des choses légèrement différentes.
Webpack est utilisé pour compiler des bundles pour vos applications web, qui peuvent être de forme libre et avoir un point d'entrée. De plus, webpack est utilisé avec babel-presets, qui vous permet d'utiliser des constructions ES6+ modernes dans des navigateurs relativement anciens. De plus, webpack est responsable de l'assemblage des node_modules dépendants dans un seul fichier, et éventuellement de leur compression et optimisation. Vous pouvez lire plus sur la philosophie de webpack ici : https://webpack.js.org/concepts/
React-scripts est juste un kit de démarrage pour lancer un serveur webpack-dev personnalisé, qui est configuré pour fonctionner avec le boilerplate fourni pour le terrain de jeu React. Ce n'est qu'un outil de démonstration. La plupart des bibliothèques web modernes ont leur propre kit de démarrage, même les bibliothèques côté serveur, comme par exemple https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts et ainsi de suite
