Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
Що таке системи збірки? Навіщо вони потрібні?
Написаний ручками код містить багато символів, які покращують читання коду людиною, але абсолютно зайві для інтерпретатора, збільшують розмір файлів, подовжують час завантаження і т.п. Те саме стосується 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
Публікація проекту у певну папку
Коли ми працюємо з сервером розробки, посилання у браузері звертаються до кореня, наприклад 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
- Flask & Vue. OAuth. Facebook / Google Account
- Flask & Vue. Завантаження файлів
Додати коментар

Недавні записи
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
- 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
Tags
stm32 bkp soldering eeprom eb-500 led hih-4000 bme280 bmp280 3d-printer usb ethernet html git docker barometer raspberry-pi remap dc-dc rfid java-script nodemcu mpu-6050 rtc capture gpio avr brushless foc options flash flask atmega python displays rs-232 solar st-link ssd1331 dma adc bluetooth web ssd1306 wifi exti mpu-9250 pwm pmsm mongodb programmator i2c battery max1674 piezo css meteo watchdog books websocket servo dht11 ngnix mpx4115a lcd motor uart sensors nvic encoder usart sms smd bldc esp8266 tim timer gps examples
Архіви
