Использование Vue 3 с Parcel JS

В то время как Vite привлек внимание сообщества Vue.js как инструмент сборки JavaScript, я лично предпочитаю Parcel для создания моего Vue.js приложения. Хотя в большинстве руководств и документации основное внимание уделяется Vite или другим популярным инструментам сборки, цель этой статьи — дать рекомендации по настройке Parcel для проектов Vue.js. Теперь давайте рассмотрим причины, по которым вы можете рассмотреть возможность использования Parcel.

Зачем использовать посылку?

Хотя Vite отлично работает и быстро создает приложения, он фокусируется на быстром создании вещей. Вероятно, для многих это звучит великолепно, но для меня это анти-шаблон. Да, я хочу, чтобы мои инструменты разработки были быстрыми, но если это основное внимание, то часто опыт разработчиков часто отходит на второй план.

Вместо этого мне нужны инструменты для разработчиков, которые в первую очередь ориентированы на опыт разработчиков, а также работают быстро. Я думаю, что Parcel отлично справляется с этим обещанием. Большинство инструментов сборки Javascript, таких как Vite, в конечном итоге являются оболочками для существующих инструментов, но с конфигурацией скрытой и предварительно настроенной для вас. Хотя это здорово, чтобы начать быстро, вы в конечном итоге столкнетесь с препятствиями и сложностью конфигурации по мере роста вашего приложения. Parcel придерживается философии нулевой конфигурации и не является оболочкой для старых инструментов. Как только вы закончите настройку, по мере роста вашего приложения вы будете сталкиваться с гораздо меньшим количеством препятствий, связанных с настройкой.

Единственным недостатком использования Parcel, особенно с Vue, является то, что настройка не документирована так, как хотелось бы. Кроме того, с выпуском Parcel 2 и Vue 3 появилось несколько особенностей настройки. Надеемся, что в будущем они будут реализованы, а пока приведенные ниже инструкции покажут вам, как настроить приложение Vue с помощью Parcel.

Создание приложения Vue 3 с помощью Parcel

Для начала вам понадобится приложение Vue 3. Если вам нужно его запустить, документация Parcel — хорошее место для начала работы с каркасом приложения. Однако, если вы будете использовать только эти инструкции, вы, вероятно, получите некоторые ошибки или предупреждения, о которых нам нужно позаботиться.

Исправление 1: package.json — пакет Vue

В свой package.json вам нужно добавить раздел псевдонимов. Это позволит Parcel узнать правильную версию Vue для использования при сборке вашего приложения.

"alias": {
  "vue": "vue/dist/vue.esm-browser.js"
},

Особое примечание для производственных сборок

Сейчас существует ошибка при переходе на рабочие сборки с Vue 3 и Parcel. Поэтому, когда вы делаете производственную сборку, вам нужно переключить псевдоним на vue.esm-browser.prod.js. Я просто использую команду предварительной сборки в своем CI/CD, чтобы отключить ее для производственных сборок: sed -i 's/vue.esm-browser.js/vue.esm-browser.prod.js/g' пакет.json

Исправление 2: package.json — тип сборки (может потребоваться)

В зависимости от цели сборки и контекста вывода вы можете также добавить type и targets в свой package.json. Не помешает добавить их и четко указать, что вы строите. Мне также нравится часто использовать targets, потому что я хочу, чтобы Parcel создавал несколько вещей.

"type": "module",
"targets": {
  "myapp": {
    "source": "src/index.js",
    "distDir": "dist",
    "context": "browser",
    "outputFormat": "global"
  }
},

Исправление 3. JS основного приложения – отключите дополнительные предупреждения и включите Vue Options API

В вашем основном приложении JS вы, вероятно, получаете дополнительные предупреждения или хотите включить Vue Options API. Поместите эти переменные в ваш исходный JS-файл приложения, чтобы отключить предупреждения инструмента разработки и явно настроить Vue Options API или нет. Возможно, вы захотите поместить их в начало файла.

__VUE_OPTIONS_API__ = true;

if (process.env.NODE_ENV !== 'production') {
  __VUE_PROD_DEVTOOLS__ = true;
} else {
  __VUE_PROD_DEVTOOLS__ = false;
}

Получайте удовольствие от разработки своего нового приложения Vue 3 и выбросьте свой аспирин, поскольку теперь вы будете на легкой улице и будете иметь гораздо меньше ошибок конфигурации. Parcel JS справится с большинством других настроек, даже установив преобразователи, которые вам понадобятся для компиляции таких вещей, как Vue Single File Components и Typescript.