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. Завантаження файлів
Недавні записи
- Розпізнавання мови (Speech recognition)
- Selenium
- Комп'ютерний зір (Computer Vision)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
- Модуль драйверів напівмосту IGBT транзисторів
- Драйвер IGBT транзисторів на A316J
- AS5600. Варіант встановлення на BLDC мотор
- DC-DC для IGBT драйверів ізольований 2 W +15 -8 вольт
- U-FOC - Векторне керування безколекторними моторами
Tags
esp8266 examples adc usart rfid eb-500 soldering lcd stm32 raspberry-pi python mongodb gps mpu-9250 sensors led hih-4000 foc ngnix wifi servo sms ethernet bldc 3d-printer bluetooth mpx4115a web pmsm options remap solar timer bme280 mpu-6050 avr docker flash bkp capture gpio uart meteo i2c usb rtc encoder programmator ssd1306 battery displays java-script barometer watchdog eeprom flask websocket pwm dht11 motor ssd1331 piezo smd brushless atmega books css git st-link dc-dc html nodemcu dma nvic rs-232 exti tim bmp280 max1674
Архіви