При настройке нового проекта с нуля создание всей необходимой конфигурации до того, как вы сможете начать отгрузку функций, может занять дни, если не недели.

Настройка транспиляторов, компиляторов, препроцессоров и прочего - это долгий шаг, прежде чем вы сможете реализовать то, что конечный пользователь действительно увидит. Чтобы ускорить повторяющиеся задачи и процессы, мы познакомились с несколькими инструментами.

Раньше у нас были бегуны по задачам. Сначала у нас был Grunt, затем появился Gulp. Теперь у нас есть такие комплекты, как Webpack и Rollup. У них есть свое место, и они являются отличными инструментами, если мы хотим настраивать каждый шаг на нашем пути в нашем приложении. Но что, если мы этого не сделаем? Что, если мы делаем POC или работаем над небольшим проектом, который мы хотим запустить как можно быстрее?

К счастью, выход есть. Посылка предлагает нам настройку нулевой конфигурации. Это означает, что для Parcel нет файла конфигурации, в отличие от webpack.config для Webpack или gulpfile для Gulp. Это также означает, что количество настроек, которые мы можем сделать, ограничено. Но в конце концов, это то, что нам нужно, поэтому давайте погрузимся в настройку проекта React с поддержкой Typescript. Учитывая необходимость полноты, давайте также добавим Sass, поскольку это не потребует дополнительных усилий.

Определение зависимостей

Во-первых, давайте начнем с отправки посылки с npm i parcel-bundler и посмотрим на наш package.json файл. Прямо на этом этапе вот как выглядит настройка моего проекта:

Все, что у нас есть на этом этапе, - это файл package.json с единственной зависимостью - собственно parcel. Нам не нужно беспокоиться о других пакетах, так как Parcel позаботится о загрузке зависимостей за нас.

Как видно из проводника, я создал общую папку и поместил туда файл index.html. Я также добавил сценарий запуска, который использует команду parcel для запуска сервера разработки с использованием нашего индексного файла. Флаг --open указывает Parcel открыть его в браузере, как только сервер будет запущен.

Создание файлов ввода

Для index.html нам нужно включить только самый минимум:

Поскольку мы используем React, и все приложение будет отображаться на стороне клиента, мы можем обойтись одним контейнером и сообщением для пользователя в случае, если для них отключен JavaScript.

Кроме того, я добавил тег сценария, указывающий на входной файл, в отдельный каталог вне общей папки. Он будет отвечать за рендеринг приложения. Обязательно укажите расширение tsx, чтобы сообщить Parcel, что мы хотим использовать TypeScript. Для простоты содержимое этого файла состоит всего из 13 строк кода:

После того, как все готово, попробуйте запустить сценарий запуска с npm run start, который мы определили в нашем package.json файле. Parcel начнет читать ваш index.html файл и увидит, что у нас есть ссылка на index.tsx, поэтому он автоматически начнет загрузку TypeScript.

Как только это будет сделано, он начнет читать index.tsx файл и увидит, что мы импортировали React и React-dom. Обнаружив, что отсутствуют зависимости, он также запустит процесс установки для них. Как только все будет установлено, вы должны увидеть, что ваш сервер работает. Если после сборки у вас возникнут ошибки, попробуйте перезапустить npm run start.

Parcel также создаст несколько дополнительных папок после запуска сервера: dist и .cache, что означает, что ваша структура папок должна выглядеть примерно так:

Прямо сейчас в нашем проекте нет типов для проверки TypeScript, и нам также не хватает соответствующих файлов конфигурации. Для начальной загрузки приложения вы можете использовать эти шаблоны для tsconfig.json и tslint.json и изменять их по своему вкусу:

Если вы хотите узнать больше о параметрах, которые вы можете использовать, вы можете обратиться к документации, которая довольно обширна.

Настройка Sass

Чтобы задействовать Sass для проекта, все, что нам нужно сделать, это создать файл .scss и импортировать его в наш компонент приложения:

Как только мы начнем изменять index.scss, Parcel обнаружит, что нам не хватает пакета sass, и заберет его за нас. Используя магию css-анимации, открыв браузер, вы увидите, что ваше приложение отображается:

Создание проекта

Все, что осталось сделать, это построить проект, чтобы мы могли его развернуть. Для этого мы можем расширить файл package.json дополнительным скриптом, который оставляет нам следующее:

Скомпилировать проект так же просто, как вызвать parcel build в нашем файле ввода. Мы также можем передать необязательные флаги. Для этой настройки я хочу пропустить исходные карты, поэтому я передал флаг --no-source-maps.

Полный список флагов интерфейса командной строки см. в их документации по интерфейсу командной строки.

Вы также могли заметить, что я удалил курсор в начале номеров версий для каждой зависимости. Это гарантирует, что каждый раз, когда наш проект отключается и мы запускаем npm i, чтобы все настроить, у нас всегда будут одни и те же точные версии. Таким образом, если зависимость обновлена, это не нарушит нашу кодовую базу.

Если вы сейчас запустите npm run build, он построит проект и заполнит папку dist.

Выводы

Нет файла конфигурации, но у нас есть проект с надлежащим техническим стеком. Parcel автоматически извлекает для нас требуемые зависимости и выполняет сборку, транспилирование и предварительную обработку модулей прямо из коробки в своем ядре, не предоставляя разработчику какой-либо файл конфигурации. Поскольку здесь не так много параметров конфигурации, документация легко усваивается, поэтому, если у вас все равно возникнет ошибка, вы, скорее всего, найдете решение для нее.

Это выгодно другим сборщикам, каждая монета имеет две стороны, и Parcel не является исключением. Если вам нужно настроить процесс объединения и сборки в соответствии с вашими потребностями, тогда Parcel не будет лучшим выбором. Самостоятельная работа со всем этим также означает, что он часто будет делать предположения. При работе с Parcel следите за пакетами, которые он загружает. Если вы используете свою собственную реализацию i18n и она находит ссылки на нее в ваших файлах, она может захотеть получить пакет i18n из npm, который в противном случае не нужен для ваш проект.

Посылка - прекрасный инструмент для тех, кто хочет сразу перейти к делу и начать доставку. Если вы будете помнить, о чем нужно заботиться при работе с ним, он вам пригодится. 🥂