Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8

11.06.2021

Що таке системи збірки? Навіщо вони потрібні?

Написаний ручками код містить багато символів, які покращують читання коду людиною, але абсолютно зайві для інтерпретатора, збільшують розмір файлів, подовжують час завантаження і т.п. Те саме стосується CSS. Крім того, існує така проблема, як сумісність з різними версіями браузерів. Або Ви вирішуєте ці проблеми самостійно, або це за вас зроблять елементи системи збірки проекту. Мені більше подобається другий варіант :) Зібрані проекти, зазвичай, менші за розміром, завантажуються та стартують швидше. Системи збірки під час розробки аналізують Ваш код і попереджують про помилки. Це реально допомагає писати чистіше. Фрагменти CSS коду для різних компонент не будуть перетинатися. А у фінальний код не будуть потрапляти коментарі, які користувачам не потрібно бачити взагалі.

Які є системи збірки для Vue

Webpack, Browserify, Rollup.

Чому Webpack?

Vue використовує Webpack за замовчуванням. Я завжди використовував Webpack, інші не використовував, порівняти не можу. Якщо у когось є такий досвід - пишіть у коментарях. Буду вдячний.

Які відмінності для розробника

• одно-файлові компоненти VUE
• все розкладено по окремим директоріям, файлам
• контроль залежностей у вашому проекті
• легше різати на чанки великі проекти
• простіша групова розробка, коли колектив розробників великий

Як розробляти проект з сервером розробки

Встановлюємо vue, vue-cli

npm install vue
npm install -g @vue/cli

Створюємо проект:

vue create frontend

Запускаємо проект з сервером розробки:

cd frontend
npm run serve

Збираємо проект:

npm run build

У прикладі використовуються пакети, які потрібно буде встановити.

Встановлення пакетів:

npm install vue-lodash --save
npm install vuex --save
npm install vue-router
npm install vue-material --save
npm install vuejs-dialog --save
npm install fingerprintjs2
npm install vue bootstrap bootstrap-vue

Як розробляти проект з бекендом (на локальній машині)

• запускаємо бекенд: python3 ./run.py
• dataset.js - URL до бекенду. Обов'язково з портом
• запускаємо сервер розробки фронтенда: npm run serve

Сервер фронтенда на порту 8080, бекенд 5000 тому проблем розробки на локальному компі не виникає.

Публікація проекту у певну папку

Коли ми працюємо з сервером розробки, посилання у браузері звертаються до кореня, наприклад localhost:8080/. Але на проді може знадобитися, щоб фронтенд був розташований у іншій директорії. Це можна описати у файлі конфігурації:

vue.config.js:

...
  publicPath: process.env.NODE_ENV === 'production'
    ? '/frontend/'
    : '/',
...

Як використовувати чанки (Webpack Chunk Name)?

У попередніх прикладах ми ручками розкладали компоненти по файликам, довантажували необхідні у beforeEnter (дивись як писали роути):

  { path: '/product/prm/:prm',
    component: { template: '' },
    beforeEnter (to, from, next) { loadComponents("product.js"); next() }
  }, 

Це КАПЕЦЬ як не зручно у великих проектах! Завжди провтикуєш, що потрібно вантажити додаткові файли. На щастя тепер такою фігньою страждати не потрібно.

Роут описується так:

const Product = () => import(
  /* webpackChunkName: "product" */ '@/components/Product.vue'
);

Все. Цей шмат (webpackChunk обізваний нами "product") буде завантажуватися тільки тоді, коли буде потрібен. ми не мусимо згадувати: а які ще компоненти треба завантажити, бо зараз система збірки сама знає, які компоненти використовує: у даному випадку, Product.vue і включить їх у цей чанк.

Як юзати фронтенд з бекендом з попередніх прикладів

Збираємо проект:

npm run build

потім, після збірки, копіюємо файли з папочки dist у папку frontend прикладу з бекендом. Все. Далі це можна бути автоматизувати.

Що нам дала система збірки проекта?

Використання системи збірки проекту спростило повторне використання компонент, мінімізувало всі скрипти, зменшило вірогідність помилок у коді, розширило підтримку браузерів.

Висновки. Що далі?

Коли можна НЕ юзати збірку? У деяких, дуже дрібних проектах, збірка проекту може заважати і бути взагалі не потрібною. Не треба страждати, можна відмовитись від неї. Також, в окремих випадках, коли Ви використовуєте специфічні бібліотеки JS, які ну дуже важко прикрутити, - теж доводиться робити проект без збірки. Коли Ви працюєте над проектом один, це не проблема взагалі. Але, якщо розробників декілька, тоді значно складніше організувати їх роботу і без систем збірки проектів не обійтися.

Це фінальна стаття цієї серії прикладів. Цими прикладами я намагався пояснити основи і принципи побудови web-додатків (фронтенда) і те, як вони працюють з бекендом. Подальші приклади, якщо будуть, то - виключно спеціалізовані з якоїсь теми, але на базі цього останнього прикладу.

Як зібрати і запустити приклад?

- створюємо директорію vue_projects - cd vue_projects - встановлюємо vue:

npm install vue
npm install -g @vue/cli

- копіюємо директорію frontend (з архіву)

- заходимо удиректорію frontend, встановлюємо потрібні пакети:

npm install

npm install vue-lodash --save
npm install vuex --save
npm install vue-router
npm install vue-material --save
npm install vuejs-dialog --save
npm install fingerprintjs2
npm install vue bootstrap bootstrap-vue 

Далі запускаємо сервер розробки або збираємо проект:

npm run serve
npm run build

Або скачати архів з усім барахлом, розпакувати і вперед.

Дивись також:

• Flask & Vue. Приклад# 2.1
• Flask & Vue. Приклад# 2.2 Frontend - Зручна навігація
• Flask & Vue. Приклад# 2.3 Серверна пагінація, пошук, сортування даних
• Flask & Vue. Приклад# 2.4 Проста аутентифікація
• Flask & Vue. Приклад# 2.5 Авторизація
• Flask & Vue. Приклад# 2.6 Кастомні компоненти
• Flask & Vue. Приклад# 2.7 SQLAlchemy, Migrate, Marshmallow, JWT
• Flask & Vue. Використання систем збірки проекту. Webpack