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

11.06.2021

У цій статті: Система збірки проекту Vue. Webpack.

У попередніх прикладах ми писали фронтенд на Vue, як це робили наші діди. Але існують системи збірки проекту для Vue. У цьому прикладі розберемося що це, навіщо і коли це добре, а коли - зайве.

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

Написаний ручками код містить багато символів, які покращують читання коду людиною, але абсолютно зайві для інтерпретатора, збільшують розмір файлів, подовжують час завантаження і т.п. Те саме стосується 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-додатків (фронтенда) і те, як вони працюють з бекендом. Подальші приклади, якщо будуть, то - виключно спеціалізовані з якоїсь теми, але на базі цього останнього прикладу.

Завантажити приклад #8

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

- створюємо директорію 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

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

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

web-dev склерозник

Коментарі:

Додати коментар

Категорії

Недавні записи

Конструктор регуляторів моторів. Структура.
Конструктор регуляторів моторів. Анонс.
Golang + Vue + PostgreSQL #2
Golang + Vue + SQLite #1
FOC Position Control. Векторне управління - Стабілізація положення
Flask & Vue. Завантаження файлів. Приклад № 2.10
Рекуперація. FOC і цікаві досліди
Flask & Vue. OAuth. Приклад№ 2.9
Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7

Архіви

оберіть місяць: