Разница между Webpack / Babel и react-scripts

По сути, они служат разным целям и обычно появляются вместе. Я объясню, для чего они предназначены.

Вавилон

Вавилонский переводчик. Он может переводить все виды ECMAScript высокой версии (не только ECMAScript, но его легко понять) в ES5, который более широко поддерживается браузерами (особенно более старыми версиями). Его основная задача - превратить неподдерживаемые или современные языковые функции в ES5.

Webpack

Webpack - это, помимо прочего, анализатор зависимостей и сборщик модулей. Например, если модулю A требуется B в качестве зависимости, а модулю B требуется C в качестве зависимости, тогда webpack сгенерирует карту зависимостей, например C -> B -> A. На практике это намного сложнее, чем это, но в целом концепция состоит в том, что Webpack объединяет модули со сложными отношениями зависимости в пакеты. Относительно отношений webpack с babel: когда webpack обрабатывает зависимости, он должен все превращать в javascript, потому что webpack работает поверх javascript. В результате он использует разные загрузчики для перевода разных типов ресурсов / кода в javascript. Когда нам нужны функции ES6 или ES7, мы используем babel-loader для этого.

сценарии реакции

Когда мы запускаем проект, основанный на реакции, настройка среды сборки - сложная и трудоемкая работа. Чтобы помочь с этим, разработчики React создали пакет npm под названием react-scripts, который включает в себя большую часть базовой настройки, которая понадобится большинству людей для среднего приложения React. Babel и webpack включены как зависимости в react-scripts

WebPack и react-scripts - это немного разные вещи.

Webpack используется для компиляции пакета для вашего веб-приложения, которое может иметь произвольную форму и иметь некоторую точку входа. Более того, webpack используется с пресетами babel, что позволяет использовать современные конструкции ES6 + в относительно старых браузерах. Кроме того, webpack отвечает за сборку зависимых модулей node_modules в одном файле и, возможно, сжимает и оптимизирует его. Вы можете узнать больше о философии веб-пакетов здесь: https://webpack.js.org/concepts/

React-scripts - это просто стартовый набор для запуска настраиваемого webpack-dev-сервера, который настроен для работы с предоставленным шаблоном для React Playground. Это просто демонстрационные цели. Большинство современных веб-библиотек имеют собственный стартовый комплект, даже серверные библиотеки, например https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts и т. д.