Différence entre Webpack / Babel et react-scripts
Récemment, j'ai commencé à travailler sur les packs Web et les scripts de réaction et j'aimerais connaître les avantages et les inconvénients de les utiliser et en quoi ils sont différents les uns des autres.
Fondamentalement, ils servent des objectifs différents et se présentent généralement ensemble. Je vais expliquer ce qu'ils sont conçus pour faire.
babel
Babel est un transpiler. Il peut traduire tout type de version élevée ECMAScript (non seulement ECMAScript, mais il est facile à comprendre) en ES5, qui est plus largement prise en charge par les navigateurs (en particulier les versions plus anciennes). Son travail principal consiste à transformer des fonctions de langage non prises en charge ou à la fine pointe de la technologie en ES5.
Webpack
Webpack est, entre autres, un analyseur de dépendances et un bundler de modules. Par exemple, si le module A requiert B en tant que dépendance et le module B requiert C en tant que dépendance, Webpack générera une carte de dépendance du type C -> B -> A. En pratique, il est beaucoup plus compliqué que cela, mais Le concept est que Webpack met en paquets des modules avec des relations de dépendance complexes. En ce qui concerne la relation de webpack avec babel: lorsque webpack traite des dépendances, il doit tout transformer en javascript, car webpack fonctionne par dessus le javascript. En conséquence, il utilise différents chargeurs pour traduire différents types de ressources/codes en javascript. Lorsque nous avons besoin de fonctionnalités ES6 ou ES7, nous utilisons babel-loader pour y parvenir.
réagir-script
lorsque nous démarrons un projet basé sur react, la configuration de l'environnement de construction est un travail difficile et qui prend du temps. Pour aider à cela, les développeurs de React ont créé un paquet npm appelé react-scripts qui comprend beaucoup de la configuration de base dont la plupart des gens auront besoin pour une moyenne React app. Babel et webpack sont inclus en tant que dépendances dans react-scripts
WebPack et react-scripts sont des choses légèrement différentes.
Webpack est utilisé pour compiler un ensemble pour votre application Web, qui peut être de forme libre et avoir un point d’entrée. De plus, webpack est utilisé avec les préconfigurations babel, ce qui vous permet d’utiliser des constructions ES6 + modernes dans des navigateurs relativement anciens. De plus, webpack est responsable des noeuds_modules dépendant de l'assembly dans un fichier, et peut-être le compresse et l'optimise. Vous pouvez en savoir 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-server personnalisé, qui est configuré pour fonctionner avec le passe-partout fourni pour React). Il ne s’agit que de démo. propre kit de démarrage, même les bibliothèques côté serveur, par exemple https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts et ainsi de suite