Webpack 5'dagi JavaScript Module Federation yordamida mikro-frontendlar imkoniyatlarini oching. Masshtablanuvchi, qo'llab-quvvatlanadigan va mustaqil veb-ilovalar yaratishni o'rganing.
Webpack 5 bilan JavaScript Module Federation: Mikro-frontendlar uchun keng qamrovli qo'llanma
Doimiy rivojlanib borayotgan veb-dasturlash sohasida katta va murakkab ilovalarni yaratish qiyin vazifa bo'lishi mumkin. An'anaviy monolit arxitekturalar ko'pincha dasturlash vaqtining uzayishiga, joylashtirishdagi to'siqlarga va kod sifatini saqlashdagi qiyinchiliklarga olib keladi. Mikro-frontendlar bu muammolarni hal qilish uchun kuchli arxitektura namunasi sifatida paydo bo'ldi, bu jamoalarga katta veb-ilovaning mustaqil qismlarini yaratish va joylashtirish imkonini beradi. Mikro-frontendlarni amalga oshirish uchun eng istiqbolli texnologiyalardan biri bu Webpack 5 da taqdim etilgan JavaScript Module Federationdir.
Mikro-frontendlar nima?
Mikro-frontendlar - bu frontend ilovasi kichikroq, mustaqil birliklarga ajratiladigan arxitektura uslubi bo'lib, ular turli jamoalar tomonidan avtonom ravishda ishlab chiqilishi, sinovdan o'tkazilishi va joylashtirilishi mumkin. Har bir mikro-frontend ma'lum bir biznes sohasi yoki funksiya uchun mas'uldir va ular ish vaqtida birgalikda yig'ilib, to'liq foydalanuvchi interfeysini tashkil qiladi.
Buni kompaniya kabi tasavvur qiling: bitta ulkan dasturchilar jamoasi o'rniga, sizda ma'lum sohalarga e'tibor qaratadigan bir nechta kichik jamoalar mavjud. Har bir jamoa mustaqil ishlay oladi, bu esa tezroq ishlab chiqish sikllari va osonroq texnik xizmat ko'rsatish imkonini beradi. Amazon kabi yirik elektron tijorat platformasini ko'rib chiqing; turli jamoalar mahsulotlar katalogi, xarid savati, to'lov jarayoni va foydalanuvchi hisobini boshqarishi mumkin. Bularning barchasi mustaqil mikro-frontendlar bo'lishi mumkin.
Mikro-frontendlarning afzalliklari:
- Mustaqil joylashtirish: Jamoalar o'z mikro-frontendlarini ilovaning boshqa qismlariga ta'sir qilmasdan mustaqil ravishda joylashtirishlari mumkin. Bu joylashtirish xavfini kamaytiradi va tezroq reliz sikllariga imkon beradi.
- Texnologiyadan mustaqillik: Turli mikro-frontendlar turli texnologiyalar yoki freymvorklar (masalan, React, Angular, Vue.js) yordamida yaratilishi mumkin. Bu jamoalarga o'zlarining maxsus ehtiyojlari uchun eng yaxshi texnologiyani tanlash va butun ilovani qayta yozmasdan asta-sekin yangi texnologiyalarni o'zlashtirish imkonini beradi. Tasavvur qiling, bir jamoa mahsulotlar katalogi uchun React, boshqasi marketing sahifalari uchun Vue.js va uchinchisi to'lov jarayoni uchun Angular'dan foydalanmoqda.
- Jamoa avtonomiyasining yaxshilanishi: Jamoalar o'z mikro-frontendlariga to'liq egalik qiladilar, bu esa avtonomiyaning oshishiga, tezroq qaror qabul qilishga va dasturchi unumdorligining yaxshilanishiga olib keladi.
- Masshtablanuvchanlikning oshishi: Mikro-frontendlar alohida mikro-frontendlarni turli serverlarda joylashtirish orqali ilovangizni gorizontal ravishda masshtablash imkonini beradi.
- Koddan qayta foydalanish imkoniyati: Umumiy komponentlar va kutubxonalarni mikro-frontendlar o'rtasida osongina ulashish mumkin.
- Qo'llab-quvvatlash osonroq: Kichikroq kod bazalarini odatda tushunish, qo'llab-quvvatlash va nosozliklarni tuzatish osonroq bo'ladi.
Mikro-frontendlarning qiyinchiliklari:
- Murakkablikning ortishi: Bir nechta mikro-frontendlarni boshqarish umumiy arxitekturaga, ayniqsa aloqa, holatni boshqarish va joylashtirish jihatidan murakkablik qo'shishi mumkin.
- Ishlash samaradorligiga qo'shimcha yuk: Bir nechta mikro-frontendlarni yuklash, ayniqsa, ular to'g'ri optimallashtirilmagan bo'lsa, ishlash samaradorligiga qo'shimcha yuk olib kelishi mumkin.
- Kesishuvchi masalalar: Autentifikatsiya, avtorizatsiya va mavzulashtirish kabi kesishuvchi masalalarni mikro-frontend arxitekturasida hal qilish qiyin bo'lishi mumkin.
- Operatsion qo'shimcha yuk: Bir nechta mikro-frontendlarni joylashtirish va monitoringini boshqarish uchun yetuk DevOps amaliyotlari va infratuzilmasini talab qiladi.
JavaScript Module Federation nima?
JavaScript Module Federation - bu Webpack 5 xususiyati bo'lib, u ish vaqtida alohida kompilyatsiya qilingan JavaScript ilovalari o'rtasida kod almashish imkonini beradi. U sizga ilovangizning qismlarini boshqa ilovalar tomonidan iste'mol qilinishi mumkin bo'lgan "modullar" sifatida ochib berishga imkon beradi, bunda npm kabi markaziy repozitoriyga nashr etish shart emas.
Module Federation'ni ilovalarning federativ ekotizimini yaratish usuli deb o'ylang, bunda har bir ilova o'z funksionalligini qo'shishi va boshqa ilovalarning funksionalligidan foydalanishi mumkin. Bu kompilyatsiya vaqtidagi bog'liqliklarga bo'lgan ehtiyojni yo'qotadi va haqiqatan ham mustaqil joylashtirish imkonini beradi.
Masalan, dizayn tizimi jamoasi UI komponentlarini modullar sifatida ochib berishi mumkin va turli ilova jamoalari bu komponentlarni npm paketlari sifatida o'rnatmasdan to'g'ridan-to'g'ri dizayn tizimi ilovasidan iste'mol qilishlari mumkin. Dizayn tizimi jamoasi komponentlarni yangilaganida, o'zgarishlar barcha iste'mol qiluvchi ilovalarda avtomatik ravishda aks etadi.
Module Federation'dagi asosiy tushunchalar:
- Host (Xost): Masofaviy modullarni iste'mol qiluvchi asosiy ilova.
- Remote (Masofaviy): Boshqa ilovalar tomonidan iste'mol qilinishi uchun modullarni ochib beradigan ilova.
- Shared Modules (Umumiy modullar): Host va remote ilovalar o'rtasida ulashiladigan modullar (masalan, React, Lodash). Module Federation har bir modulning faqat bitta versiyasi yuklanishini ta'minlash uchun umumiy modullarning versiyalanishi va takrorlanishini avtomatik ravishda boshqarishi mumkin.
- Exposed Modules (Ochib berilgan modullar): Masofaviy ilovadan boshqa ilovalar tomonidan iste'mol qilish uchun taqdim etilgan maxsus modullar.
- RemoteEntry.js: Webpack tomonidan yaratilgan fayl bo'lib, u masofaviy ilovaning ochib berilgan modullari haqidagi metama'lumotlarni o'z ichiga oladi. Host ilovasi bu fayldan masofaviy modullarni topish va yuklash uchun foydalanadi.
Webpack 5 bilan Module Federation'ni sozlash: Amaliy qo'llanma
Keling, Webpack 5 bilan Module Federation'ni sozlashning amaliy misolini ko'rib chiqamiz. Biz ikkita oddiy ilova yaratamiz: bir Host ilovasi va bir Remote ilovasi. Remote ilovasi bir komponentni ochib beradi va Host ilovasi uni iste'mol qiladi.
1. Loyihani sozlash
Ilovalaringiz uchun ikkita alohida papka yarating: `host` va `remote`.
```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```2. Remote ilovasini sozlash
`remote` papkasida quyidagi fayllarni yarating:
- `src/index.js`: Ilovaning kirish nuqtasi.
- `src/RemoteComponent.jsx`: Ochib beriladigan komponent.
- `webpack.config.js`: Webpack sozlash fayli.
src/index.js:
```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (Remote Application
src/RemoteComponent.jsx:
```javascript import React from 'react'; const RemoteComponent = () => (This is a Remote Component!
Rendered from the Remote Application.
webpack.config.js:
```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```Oddiy HTML tuzilishiga ega `public/index.html` faylini yarating. Muhim qismi - `
`3. Host ilovasini sozlash
`host` papkasida quyidagi fayllarni yarating:
- `src/index.js`: Ilovaning kirish nuqtasi.
- `webpack.config.js`: Webpack sozlash fayli.
src/index.js:
```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (Host Application
webpack.config.js:
```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```Oddiy HTML tuzilishiga ega `public/index.html` faylini yarating (remote ilovasiga o'xshash). Muhim qismi - `
`4. Babel'ni o'rnatish
`host` va `remote` papkalarining ikkalasida ham Babel bog'liqliklarini o'rnating:
```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```5. Ilovalarni ishga tushirish
`host` va `remote` papkalarining ikkalasida ham `package.json` fayliga quyidagi skriptni qo'shing:
```json "scripts": { "start": "webpack serve" } ```Endi ikkala ilovani ham ishga tushiring:
```bash cd remote npm start cd ../host npm start ```Brauzeringizni oching va `http://localhost:3000` manziliga o'ting. Siz Host ilovasining ichida render qilingan Remote komponentini ko'rishingiz kerak.
Asosiy sozlash parametrlari izohi:
- `name`: Ilova uchun unikal nom.
- `filename`: Ochib berilgan modullar haqidagi metama'lumotlarni o'z ichiga oladigan fayl nomi (masalan, `remoteEntry.js`).
- `exposes`: Qaysi modullar ochib berilishi kerakligini ko'rsatuvchi modul nomlarining fayl yo'llariga mosligi.
- `remotes`: Har bir masofaviy ilova uchun remoteEntry.js faylini qayerdan topishni ko'rsatuvchi masofaviy ilova nomlarining URL manzillariga mosligi.
- `shared`: Host va remote ilovalar o'rtasida ulashilishi kerak bo'lgan modullar ro'yxati. `singleton: true` opsiyasi har bir umumiy modulning faqat bitta nusxasi yuklanishini ta'minlaydi. `eager: true` opsiyasi umumiy modulning oldindan (ya'ni, boshqa modullardan oldin) yuklanishini ta'minlaydi.
Module Federation'ning ilg'or usullari
Module Federation yanada murakkab mikro-frontend arxitekturalarini yaratishga yordam beradigan ko'plab ilg'or xususiyatlarni taklif etadi.
Dinamik Remotelar
Webpack sozlamalarida masofaviy ilovalarning URL manzillarini qat'iy belgilash o'rniga, ularni ish vaqtida dinamik ravishda yuklashingiz mumkin. Bu sizga host ilovasini qayta kompilyatsiya qilmasdan masofaviy ilovalarning joylashuvini osongina yangilash imkonini beradi.
Masalan, siz masofaviy ilovalarning URL manzillarini konfiguratsiya faylida yoki ma'lumotlar bazasida saqlashingiz va ularni JavaScript yordamida dinamik ravishda yuklashingiz mumkin.
```javascript // webpack.config.js ichida remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // remoteUrl 'http://localhost:3001/remoteEntry.js' kabi deb faraz qilaylik const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // modul federatsiyasining kaliti shundaki, masofaviy ilova // remote'dagi nom orqali mavjud bo'ladi resolve(window.remote); }; document.head.appendChild(script); })`, }, ```Endi siz host ilovasini `?remote=http://localhost:3001/remoteEntry.js` so'rov parametri bilan yuklashingiz mumkin.
Versiyalangan umumiy modullar
Module Federation har bir modulning faqat bitta mos versiyasi yuklanishini ta'minlash uchun umumiy modullarning versiyalanishi va takrorlanishini avtomatik ravishda boshqarishi mumkin. Bu, ayniqsa, ko'plab bog'liqliklarga ega bo'lgan katta va murakkab ilovalar bilan ishlashda muhimdir.
Siz Webpack sozlamalarida har bir umumiy modulning versiya diapazonini belgilashingiz mumkin.
```javascript // webpack.config.js ichida shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```Maxsus modul yuklovchilar
Module Federation sizga turli manbalardan yoki turli formatlarda modullarni yuklash uchun ishlatilishi mumkin bo'lgan maxsus modul yuklovchilarni aniqlash imkonini beradi. Bu CDN'dan yoki maxsus modul reestridan modullarni yuklash uchun foydali bo'lishi mumkin.
Mikro-frontendlar o'rtasida holatni ulashish
Mikro-frontend arxitekturalarining qiyinchiliklaridan biri bu turli mikro-frontendlar o'rtasida holatni ulashishdir. Bu muammoni hal qilish uchun siz bir nechta yondashuvlardan foydalanishingiz mumkin:
- URL asosidagi holatni boshqarish: Holatni URL manzilida saqlash va mikro-frontendlar o'rtasida aloqa qilish uchun URL'dan foydalanish. Bu oddiy va tushunarli yondashuv, ammo murakkab holatlar uchun noqulay bo'lishi mumkin.
- Maxsus hodisalar: Mikro-frontendlar o'rtasida holat o'zgarishlarini e'lon qilish uchun maxsus hodisalardan foydalanish. Bu mikro-frontendlar o'rtasida zaif bog'liqlikni ta'minlaydi, ammo hodisalarga obunalarni boshqarish qiyin bo'lishi mumkin.
- Umumiy holatni boshqarish kutubxonasi: Butun ilovaning holatini boshqarish uchun Redux yoki MobX kabi umumiy holatni boshqarish kutubxonasidan foydalanish. Bu holatni boshqarishning markazlashtirilgan va izchil usulini ta'minlaydi, ammo ma'lum bir holatni boshqarish kutubxonasiga bog'liqlikni keltirib chiqarishi mumkin.
- Xabar brokeri: Mikro-frontendlar o'rtasida aloqa va holat almashinuvini osonlashtirish uchun RabbitMQ yoki Kafka kabi xabar brokeridan foydalanish. Bu murakkabroq yechim, ammo u yuqori darajadagi moslashuvchanlik va masshtablanuvchanlikni taklif qiladi.
Module Federation bilan mikro-frontendlarni amalga oshirishning eng yaxshi amaliyotlari
Module Federation bilan mikro-frontendlarni amalga oshirishda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:
- Har bir mikro-frontend uchun aniq chegaralarni belgilang: Har bir mikro-frontend ma'lum bir biznes sohasi yoki funksiya uchun mas'ul bo'lishi va yaxshi aniqlangan interfeyslarga ega bo'lishi kerak.
- Izchil texnologiya stekidan foydalaning: Module Federation sizga turli mikro-frontendlar uchun turli texnologiyalardan foydalanishga imkon bersa-da, murakkablikni kamaytirish va qo'llab-quvvatlashni yaxshilash uchun odatda izchil texnologiya stekidan foydalanish yaxshi fikrdir.
- Aniq aloqa protokollarini o'rnating: Mikro-frontendlarning bir-biri bilan qanday o'zaro ta'sir qilishini belgilovchi aniq aloqa protokollarini aniqlang.
- Joylashtirish jarayonini avtomatlashtiring: Mikro-frontendlarning mustaqil va ishonchli tarzda joylashtirilishini ta'minlash uchun joylashtirish jarayonini avtomatlashtiring. CI/CD konveyerlari va kod sifatida infratuzilma vositalaridan foydalanishni ko'rib chiqing.
- Mikro-frontendlaringizning ishlashini kuzatib boring: Har qanday ishlashdagi to'siqlarni aniqlash va bartaraf etish uchun mikro-frontendlaringizning ishlashini kuzatib boring. Google Analytics, New Relic yoki Datadog kabi vositalardan foydalaning.
- Ishonchli xatoliklarni qayta ishlashni joriy qiling: Ilovangizning nosozliklarga chidamli bo'lishini ta'minlash uchun ishonchli xatoliklarni qayta ishlashni joriy qiling.
- Markazlashtirilmagan boshqaruv modelini qabul qiling: Umumiy izchillik va sifatni saqlagan holda, jamoalarga o'zlarining mikro-frontendlari haqida qaror qabul qilish huquqini bering.
Amaliyotda Module Federation'ning real hayotdagi misollari
Maxsus keys-stadilar ko'pincha maxfiy bo'lsa-da, bu yerda Module Federation juda foydali bo'lishi mumkin bo'lgan ba'zi umumlashtirilgan stsenariylar keltirilgan:
- Elektron tijorat platformalari: Yuqorida aytib o'tilganidek, yirik elektron tijorat platformalari mahsulotlar katalogi, xarid savati, to'lov jarayoni va foydalanuvchi hisobini boshqarish uchun mustaqil mikro-frontendlar yaratishda Module Federation'dan foydalanishi mumkin. Bu turli jamoalarga ushbu funksiyalar ustida mustaqil ishlash va ularni ilovaning boshqa qismlariga ta'sir qilmasdan joylashtirish imkonini beradi. Global platforma masofaviy modullar orqali turli mintaqalar uchun funksiyalarni moslashtirishi mumkin.
- Moliyaviy xizmatlar ilovalari: Moliyaviy xizmatlar ilovalari ko'pincha ko'plab turli xil funksiyalarga ega murakkab foydalanuvchi interfeyslariga ega. Module Federation turli xil hisob turlari, savdo platformalari va hisobot panellari uchun mustaqil mikro-frontendlar yaratish uchun ishlatilishi mumkin. Muayyan mamlakatlarga xos bo'lgan muvofiqlik funksiyalari Module Federation orqali yetkazilishi mumkin.
- Sog'liqni saqlash portallari: Sog'liqni saqlash portallari bemorlarni boshqarish, uchrashuvlarni rejalashtirish va tibbiy yozuvlarga kirish uchun mustaqil mikro-frontendlar yaratishda Module Federation'dan foydalanishi mumkin. Turli sug'urta provayderlari yoki mintaqalar uchun turli modullar dinamik ravishda yuklanishi mumkin.
- Kontentni boshqarish tizimlari (CMS): CMS uchinchi tomon dasturchilaridan masofaviy modullarni yuklash orqali foydalanuvchilarga o'z veb-saytlariga maxsus funksionallik qo'shish imkonini berish uchun Module Federation'dan foydalanishi mumkin. Turli mavzular, plaginlar va vidjetlar mustaqil mikro-frontendlar sifatida tarqatilishi mumkin.
- O'quvni boshqarish tizimlari (LMS): LMS mustaqil ravishda ishlab chiqilgan va Module Federation orqali yagona platformaga integratsiya qilingan kurslarni taklif qilishi mumkin. Alohida kurslarga kiritilgan yangilanishlar platforma miqyosida qayta joylashtirishni talab qilmaydi.
Xulosa
Webpack 5'dagi JavaScript Module Federation mikro-frontend arxitekturalarini yaratishning kuchli va moslashuvchan usulini taqdim etadi. U ish vaqtida alohida kompilyatsiya qilingan JavaScript ilovalari o'rtasida kod almashish imkonini beradi, bu esa mustaqil joylashtirish, texnologik xilma-xillik va jamoa avtonomiyasini yaxshilashga yordam beradi. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz Module Federation'dan foydalanib masshtablanuvchi, qo'llab-quvvatlanadigan va innovatsion veb-ilovalarni yaratishingiz mumkin.
Frontend dasturlashning kelajagi, shubhasiz, modulli va taqsimlangan arxitekturalarga moyil bo'lmoqda. Module Federation ushbu zamonaviy tizimlarni yaratish uchun muhim vositani taqdim etadi, bu jamoalarga murakkab ilovalarni katta tezlik, moslashuvchanlik va chidamlilik bilan yaratish imkonini beradi. Texnologiya yetuklashgani sari, biz yanada innovatsion foydalanish holatlari va eng yaxshi amaliyotlar paydo bo'lishini kutishimiz mumkin.