При настройке нового проекта с нуля создание всей необходимой конфигурации до того, как вы сможете начать отгрузку функций, может занять дни, если не недели.
Настройка транспиляторов, компиляторов, препроцессоров и прочего - это долгий шаг, прежде чем вы сможете реализовать то, что конечный пользователь действительно увидит. Чтобы ускорить повторяющиеся задачи и процессы, мы познакомились с несколькими инструментами.
Раньше у нас были бегуны по задачам. Сначала у нас был 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, который в противном случае не нужен для ваш проект.
Посылка - прекрасный инструмент для тех, кто хочет сразу перейти к делу и начать доставку. Если вы будете помнить, о чем нужно заботиться при работе с ним, он вам пригодится. 🥂