React eject для чего
Все, что вам нужно знать о react-scripts
В прошлом создание приложения React было болезненным процессом. Вам пришлось пройти через множество настроек, прежде чем вы могли запачкать руки и развить что-то осмысленное.
Что такое сценарий?
create-react-app поставляется с четырьмя основными сценариями, каждый из которых мы рассмотрим позже. Но сейчас мы сосредоточимся на том, где найти эти скрипты.
Теперь, когда мы знаем, что такое скрипт и где его найти, давайте углубимся в каждый из них и объясним, что он делает с приложением React.
start
Или, если вы используете npm:
Эта команда не только запускает сервер, но также реагирует и отображает последнюю версию при каждом изменении. Кроме того, он покажет ошибки lint на терминале (консоли), когда он не сможет запустить сервер в виде значимых сообщений об ошибках.
Сценарий test может быть запущен на терминале с помощью следующих команд.
build
React является модульным, поэтому вы можете создавать несколько файлов или компонентов, если хотите. Эти отдельные файлы должны быть объединены или объединены, чтобы быть точными в одном файле.
Сценарий можно запустить с помощью следующих команд.
eject
Чтобы запустить команду на терминале, введите следующую команду.
Вывод
Я надеюсь, что это руководство пролило некоторый свет на удивительную конфигурацию приложения Create React. Он поставляется не только с полезными сценариями, которые могут помочь облегчить жизнь любому разработчику, но и с некоторыми командами, имеющими гибкие параметры, которые позволяют адаптировать сценарии к уникальным потребностям вашего проекта.
Полная видимость в производственных приложениях React
LogRocket похож на видеорегистратор для веб-приложений, записывая буквально все, что происходит в вашем приложении React. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и сообщать, в каком состоянии было ваше приложение, когда возникла проблема. LogRocket также отслеживает производительность вашего приложения, предоставляя отчеты с такими показателями, как загрузка ЦП клиента, использование памяти клиента и т. д.
Промежуточный пакет LogRocket Redux добавляет дополнительный уровень видимости в ваши пользовательские сессии. LogRocket записывает все действия и состояние из ваших магазинов Redux.
React: Установка и настройка
В настоящее время React является самой популярной библиотекой JavaScript для создания пользовательских интерфейсов, и в обозримом будущем эта тенденция сохранится. В этой статье мы рассмотрим способы быстрой и безболезненной настройки React. Так что мы можем погрузиться прямо в программирование!
Почему React?
Установка и настройка
Есть несколько способов начать работу с React. Во-первых, мы взглянем на CodeSandbox и CodePen. Если вы хотите сразу начать играть с кодом, это хороший способ!
React в CodeSandbox
Перейдите на https://codesandbox.io/s и нажмите «React».
Мгновенно вы окажетесь в среде React, которая была настроена с помощью create-react-app. Мы рассмотрим этот метод далее в статье! Если вы хотите начать программирование без настройки локальной установки, это отличный способ! Такие задачи, как сборка, преобразование и управление зависимостями, все автоматизированы, и вы можете легко поделиться ссылкой на все, над чем вы работали!
React в CodePen
Создаем приложение React
Установка с помощью Create React App
Все, что нам нужно сделать, это открыть наш терминал и запустить следующую команду:
Запустите указанную выше команду, чтобы начать установку! Дайте ему любое имя, которое вам нравится..
Установка может занять несколько минут. Прямо сейчас он устанавливает все зависимости, необходимые для построения вашего проекта. И это также генерирует вашу первоначальную структуру проекта.
Успех! Теперь вы можете открыть папку вашего проекта и проверить созданную файловую структуру.
Несколько команд были добавлены в файл package.json :
Запуск вашего приложения
Теперь давайте запустим наш локальный сервер! Из папки вашего приложения запустите:
Ваше приложение запустится в браузере на localhost:3000
Каждый раз, когда вы начинаете новый проект с помощью create-react-app, вы будете иметь последнюю версию React, React-DOM и React-Scripts. Теперь давайте кратко рассмотрим некоторые функции create-react-app.
Возможности Create-React-App
Прод сборка
Сама команда build преобразует ваш код React в код, который понимает браузер (используя Babel). Он также оптимизирует ваши файлы для лучшей производительности, объединяя все ваши файлы JavaScript в один файл, который будет минимизирован для сокращения времени загрузки.
Тестирование вашего приложения
Ejecting
Сообщения об ошибках
Опечатки и синтаксические ошибки приведут к ошибке компиляции. И если у вас есть куча ошибок, вы получите оверлей, разбивающий каждую, например так:
Заключение
What does this «react-scripts eject» command do?
What does the npm run eject command do? I do understand what other commands do like start, build, test. But no idea about eject.
5 Answers 5
create-react-app encapsulates all of the npm modules it is using internally, so that your package.json will be very clean and simple without you having to worry about it.
However, if you want to start doing more complex things and installing modules that may interact with modules create-react-app is using under the hood, those new modules need to know what is available and not, meaning you need to have create-react-app un-abstract them.
That, in essence, is what react-scripts eject does. It will stop hiding what it’s got installed under the hood and instead eject those things into your project’s package.json for everyone to see.
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
Alternatives to Ejecting
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
N причин, чтобы использовать Create React App
Create React App предоставляет CLI-интерфейс для создания приложений с базовой структурой, устанавливает все нужные зависимости и добавляет в package.json скрипты для запуска, тестов и сборки приложения.
Zero configuration! Разработчики не могут настраивать Webpack или Babel, пока не сделают eject.
Если вы опытный пользователь и вас не устраивает стандартная конфигурация, можете сделать eject. В таком случае Create React App используется как генератор шаблонного кода.
Команда npm run eject копирует все конфиги и транзитивные зависимости (Webpack, Babel, ESLint и т. д.) в ваш проект, чтобы вы могли их контролировать. Команды вроде npm start и npm run build не перестанут работать, но будут указывать на скопированные скрипты, чтобы их можно было модифицировать. После этого вы сами по себе.
Почему я хочу не делать eject
Во-первых, потому что эту операцию нельзя отменить. Но дело не только в этом. Вот еще несколько причин.
Я хочу получать обновления Create React App
Представьте, что команда Create React App решает перейти на Webpack 2 (а они это уже сделали), чтобы поддерживать tree-shaking и другие крутые фичи. В таком случае мне достаточно будет обновить версию react-scripts вместо того, чтобы обновлять конфиги во всех приложениях.
Или, предположим, команда Create React App релизит Plugin System #670. Я бы с радостью использовал такую систему и даже создавал бы собственные плагины. Но, если eject был сделан, ничего не выйдет.
Не люблю, когда в package.json много зависимостей
Возможно, это мелочь, но я не хочу видеть в package.json кучу зависимостей babel*, eslint* и webpack*, которые я не использую напрямую в коде.
Лишние конфиги и лишний код
Я всегда поддерживаю чистоту в приложениях. После eject создаются директории scripts и config. А с ними — около десяти новых файлов по 50–200 строчек кода в каждом. Причем в большинстве случаев eject делают, чтобы поменять всего около пяти строк кода (добавить один новый Webpack Loader).
После того как я сделаю eject и отредактирую конфиги, нужно будет скопировать их в другие приложения, потому что чаще всего конфиги приложений (пресеты Babel, Webpack loaders и плагины) одинаковые.
Почему мне нравится Create React App
Это инструмент от разработчиков React
Разработчики Create React App — это разработчики React. Я им доверяю и уверен, что они знают, как правильно разрабатывать React-приложения, реализуя все фичи с правильной связкой технологий в рамках проекта Create React App.
В структуре приложения нет конфигурации и лишних файлов
Поскольку я люблю порядок в приложениях, мне определенно нравится, что отсутствуют webpack.config, нет кучи *rc-файлов и зависимостей в package.json.
Весь стек обновляется одной строкой
Стек разработки фиксированный и стабильный
В релизах Create React App присутствуют только stage-3 функции (release candidate). Иногда интересно поиграться с новыми фичами из секции draft, например, с do-expressions или null-propagation. Можно даже посмотреть на orthogonal-classes proposal, но использовать в продакшне — совсем не лучшая идея.
Но если всё-таки использовать фичи draft и proposal, результат можно было бы описать примерно так:
Функциональность этого инструмента быстро расширяется
Я уверен, что количество фич инструмента будет быстро расти. Сообщество уже достаточно большое, и поступает много интересных идей и предложений. Вот некоторые из них:
Мой опыт работы с Create React App
Благодаря Create React App наша команда отказалась от CSS Modules, React Toolbox и еще кое-каких библиотек, для которых нужна была дополнительная конфигурация Webpack.
Кстати, react-toolbox-themr обеспечивает легкую интеграцию с React Toolbox с Create React App… Но описывать тему приложения в package.json не лучшая, как по мне, идея.
И я по-прежнему не хочу делать eject!
В официальной документации, в секции Adding a CSS Preprocessor (Sass, Less etc.), подробно описано, как настроить работу с sass или less.
Единственно ограничение — css modules.
Вместо CSS Modules мы начали смотреть в сторону Glamor, Aphrodite, styled-components, Fela и JSS.
Есть еще Radium, но мне не нравится использовать style для стилизации компонентов.
В итоге мы используем свой, еще совсем новый подход — rockey.
Описываем стили компонентов, используя Template Literals и отталкиваясь от реальных имен компонентов, вместо привычных CSS классов.
На первый взгляд подход похож на styled-components, но на самом деле совсем другой.
Загрузка из глобальных папок
Достаточно сложно работать с кодом, которому требуются модули из родительских директорий:
Обычно в Webpack это решается с помощью конфигурации resolve.modulesDirectories. Как я уже писал, в CRA-приложении нет доступа к Webpack, но возможны два решения.
Советую использовать cross-env, чтобы кроссплатформенно устанавливать переменные окружения.
Иногда полезно разделить конфиги по типу окружения (dev/test/prod). Например, вот .env.development:
Сейчас это можно сделать, установив dotenv и обновив npm scripts :
Но, скорее всего, в релиз попадет мой Pull Request — Support different env configs #1343.
Мы, например, не можем запускать приложение на 3000 порту, потому что работаем с Google Auth, который несколько лет назад был настроен на localhost порты 9001–9005. Конечно, мы можем изменить настройки Google Auth, но уже привычнее использовать именно эти порты.
Добавьте переменную окружения PORT с помощью cross-env:
Вот список возможных настроек с помощью переменных окружения:
Variable | Development | Production | Usage |
BROWSER | + | — | Create React App открывает браузер, настроенный по умолчанию, но можно задать определенный браузер или установить none, чтобы отключить эту фичу. Также можно указать на Node.JS скрипт, который будет выполняться каждый раз при старте dev-сервера. |
HOST | + | — | По умолчанию — localhost. |
PORT | + | — | По умолчанию — 3000. Если он занят, Creat React App предложит запустить приложение на следующем доступном порте. Или можно задать определенный порт. |
HTTPS | + | — | Если установлено в true — локальный dev-сервер будет запущен в https-режиме. |
PUBLIC_URL | — | + | Обычно Create React App ожидает, что приложение расположено в корне веб-сервера или путь определен в package.json (homepage). Можно переопределить ссылку для всех ассетов. Это полезно, если вы используете CDN для хостинга приложения. |
CI | + | + | Если установлено в true, Create React App будет обрабатывать warnings как ошибки. Запускает тесты без — watch параметра. |
Изменить конфиг Webpack: добавить плагины и поменять точку входа
В качестве примера приведу две ситуации, когда мне это понадобилось:
Добавьте в npm-scripts build:custom :
Затем создайте scripts/customBuild.js :
В этом случае расширится только конфиг Webpack, а не react-scripts build. Не будет красивых логов, сравнения размеров текущего и предыдущего билда и других фич.
Помните, что использование нестандартных загрузчиков (вроде yaml, markdown, dsv loaders и т. д.) и дополнительных плагинов делает ваше приложение сложнее и сложнее. И в некоторых случаях даже невозможно перейти на новый релиз Webpack.
Вот почему я не люблю даже обычные css-loaders для Webpack. Всегда стараюсь подключать только js- или json-модули. CSS-файлы вполне подходят для конфигурации Webpack поля entry. Стараюсь никогда не подключать их с помощью функции require. Это делает приложение максимально зависимым от текущего сборщика.
Babel presets and plugins
Create React App пока не поддерживает расширение babel-конфига. Соответственно декораторы также не поддерживаются.
Я даже делал Pull Request: Adding support for custom babel configuration #1357. Но его уже закрыли, и я полностью согласен с командой Create React App: не стоит засорять приложение кучей настроек.
Декораторы просто облегчают часть работы и можно обойтись без них, и как только они попадут в stage 3, они сразу же будут поддерживаться.
Фича, о которой почти никто не знает. Чуть больше информации можно найти в официальном треде на github — Document maintaining a fork of react-scripts as an alternative to ejecting. #682.
React scripts — пакет, в котором реализованы все используемые скрипты (start/test/build) и конфигурирование всех используемых инструментов.
То есть вы можете сделать форк, синхронизировать его с текущей версией и добавить нужный вам функционал.
где my-super-react-scripts — ваша версия react-scripts.
Например, есть custom-react-scripts с поддержкой декораторов, babel-preset-stage-0, LESS / SASS, CSS Modules (более подробно описано в статье Configure create-react-app without ejecting).
Awesome Create React App
Awesome Create React App — подборка интересных материалов, ожидаемых фич и FAQ. Также представлен список существующих react-scripts версий.
Список ожидаемых фич в версии 0.10.0
При необработанных исключениях показывается диалог с ошибкой, очень похожий на ранее добавленную фичу, — Syntax error overlay. Отображается сообщение об ошибке, стек вызова и строка кода, где произошла ошибка. Диалог может быть скрыт по нажатию на Escape. Ошибка, как и ранее, дублируется в консоли.
Upgrade to webpack v2 #1291
Теперь всем пользователям Create React App нужно просто обновить версию react-scripts (twitter.com/…status/819634786734112768) вместо того, чтобы читать гайды по миграции с Webpack 1 на Webpack 2. Подробнее о Webpack 2 можно почитать в статье Webpack 2 and beyond или What’s new in webpack 2.
Очень клевая фича для асинхронной подгрузки модулей. Ранее для этого использовался require.ensure.
Автоматически запускает eslint для файлов в индексе и форматирует их с помощью prettier перед каждым коммитом.
Пока реализована только как внутренняя фича для самого Create React App, но я очень надеюсь, что добавят в генерируемое приложение.
И много других крутых фич:
Нужно относиться к «недостатку конфигурации» как к фиче и ни в коем случае не как к проблеме. Возможностей, которые присутствуют, вполне достаточно для любого приложения.
Делая eject (либо при самостоятельной конфигурации), вы жертвуете всеми текущими фичами CRA (и фичами из новых релизов) ради того, чтобы добавить декораторы или еще какую-то мелочь.
Конфигурирование Webpack, Babel или любого другого инструмента в рамках Create React App сделало бы Create React App более хрупким. И команда Create React App не смогла бы гарантировать идеальную работу и стабильность инструмента. Также это спровоцировало бы появление Create React App Issues, не связанных с Create React App.
Don’t eject your Create React App
If you found yourself on this page because you want to eject your Create React App project, the details you’re looking for are at the bottom of this article.
But before you jump down, I hope you consider reviewing this article because ejecting can introduce much more complexity to your project than you might anticipate. Before you commit to your irreversible decision to eject, let me propose a few alternatives.
Why are you ejecting?
There are 3 primary reasons why someone might choose to eject and each reason has either drawbacks or alternatives that should first be investigated.
“I can manage the build on my own” or “I want full control over my project”
I’ll admit that the first CRA project I created, I immediately ejected. My naïve assumption was that managing my own build process is something experts did and I assumed I was experienced enough to handle it.
“I’m a good programmer, I can manage my own build tools, I just need a headstart from Create-React-App.”
In reality, experts do everything they can to avoid additional configuration, tools, and code. Before you eject, ask yourself, “Do I want to build something using React or do I want to fight with picky build tools when things stop working?”
Don’t eject until you have a specific reason to do so. If you feel that you have a good reason to eject at a later date, circle back to this article and reevaluate your position. Ejecting is a one-way process and makes your configuration more complex; why burn that bridge before you’ve even used it?
If you’re being thoughtful enough to learn more about ejecting before jumping in, also be thoughtful enough to consider that CRA’s “sane defaults” might work for you, at least for now.
“Create-React-App is missing a feature that I need, so I’m going to add it myself”
This is a great reason to eject. It’s the reason most people do so. However, before you eject, take the time to ensure you aren’t making extra work for yourself or repeating the work someone else has done previously.
Is this something the Create-React-App team has already discussed?
There are thousands of issues filed in the Create-React-App repo, and chances are someone has already addressed your concern. Explore the existing discussions around the topic; you might find a solution or alternative already exists. If it hasn’t been discussed yet, consider filing an issue or making a PR. Thoughtful input is always appreciated.
Has someone built this already?
A nice feature of the CRA sub-package react-scripts is that it can easily be forked and modified. The resulting forked configuration can then be used by your project. Try exploring some existing forks of react-scripts to see if they include the features you want, but without having the maintenance burden of managing your own configuration files. React-super-scripts is an example of one alternative that includes decorators, babel stage-0 features, CSS, SASS, and LESS modules:
shrynx/react-super-scripts
Do you really need this feature?
Before you dive into editing configuration files, you should ask yourself two important questions:
You’ll be adding thousands of lines of complex code for building and testing, which you will then need to learn in order to properly update, test, and debug your build. By ejecting, you’re taking on the responsibility of updating code that you might not fully understand. If your build breaks, the CRA team will be unable to support your custom configuration. If you have a development team, do you trust they will also adequately understand the changes they’re making to the build process to ensure its stability?
If you or your team do not have a strong understanding of the existing build tools already, “just adding one feature” is likely more difficult than it sounds.
Are you just adding a couple small tweaks to the CRA configuration?
There are a couple of ways to edit your configuration without ejecting. Unlike ejecting, these options are easy to back out of if necessary. React-app-rewired is one of the most popular approaches. Additionally, customize-cra is a package built on top of react-app-rewired with support for version 2 of CRA.