M

MLOG

Čeština

Odemkněte sílu mikro-frontendů s JavaScript Module Federation ve Webpack 5. Naučte se, jak vytvářet škálovatelné, udržovatelné a nezávislé webové aplikace.

JavaScript Module Federation s Webpack 5: Komplexní průvodce mikro-frontendy

V neustále se vyvíjejícím světě webového vývoje může být tvorba velkých a komplexních aplikací náročným úkolem. Tradiční monolitické architektury často vedou k prodloužení doby vývoje, úzkým místům při nasazování a problémům s udržením kvality kódu. Mikro-frontendy se objevily jako silný architektonický vzor, který tyto výzvy řeší a umožňuje týmům vytvářet a nasazovat nezávislé části větší webové aplikace. Jednou z nejslibnějších technologií pro implementaci mikro-frontendů je JavaScript Module Federation, představená ve Webpack 5.

Co jsou mikro-frontendy?

Mikro-frontendy jsou architektonickým stylem, kde je frontendová aplikace rozložena na menší, nezávislé jednotky, které mohou být vyvíjeny, testovány a nasazovány autonomně různými týmy. Každý mikro-frontend je zodpovědný za specifickou obchodní doménu nebo funkci a jsou skládány dohromady za běhu, aby vytvořily kompletní uživatelské rozhraní.

Představte si to jako firmu: místo jednoho obrovského vývojářského týmu máte několik menších týmů zaměřených na specifické oblasti. Každý tým může pracovat nezávisle, což umožňuje rychlejší vývojové cykly a snazší údržbu. Vezměte si například velkou e-commerce platformu jako Amazon; různé týmy by mohly spravovat katalog produktů, nákupní košík, proces pokladny a správu uživatelských účtů. To vše by mohly být nezávislé mikro-frontendy.

Výhody mikro-frontendů:

Výzvy mikro-frontendů:

Co je JavaScript Module Federation?

JavaScript Module Federation je funkce Webpack 5, která umožňuje sdílet kód mezi samostatně kompilovanými JavaScriptovými aplikacemi za běhu. Umožňuje vám vystavit části vaší aplikace jako „moduly“, které mohou být konzumovány jinými aplikacemi, aniž by bylo nutné je publikovat do centrálního repozitáře jako npm.

Představte si Module Federation jako způsob, jak vytvořit federovaný ekosystém aplikací, kde každá aplikace může přispívat vlastní funkcionalitou a konzumovat funkcionalitu z jiných aplikací. Tím se eliminuje potřeba závislostí v době sestavení (build-time) a umožňuje skutečně nezávislé nasazení.

Například tým design systému může vystavit UI komponenty jako moduly a různé aplikační týmy mohou tyto komponenty konzumovat přímo z aplikace design systému, aniž by je musely instalovat jako npm balíčky. Když tým design systému aktualizuje komponenty, změny se automaticky projeví ve všech konzumujících aplikacích.

Klíčové koncepty v Module Federation:

Nastavení Module Federation s Webpack 5: Praktický průvodce

Pojďme si projít praktický příklad nastavení Module Federation s Webpack 5. Vytvoříme dvě jednoduché aplikace: aplikaci Host a aplikaci Remote. Aplikace Remote vystaví komponentu a aplikace Host ji bude konzumovat.

1. Nastavení projektu

Vytvořte dva samostatné adresáře pro své aplikace: `host` a `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. Konfigurace vzdálené aplikace (Remote)

V adresáři `remote` vytvořte následující soubory:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

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'], }, }; ```

Vytvořte `public/index.html` se základní HTML strukturou. Důležitý je `

`

3. Konfigurace hostitelské aplikace (Host)

V adresáři `host` vytvořte následující soubory:

  • `src/index.js`: Vstupní bod pro aplikaci.
  • `webpack.config.js`: Konfigurační soubor Webpacku.

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

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

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'], }, }; ```

Vytvořte `public/index.html` se základní HTML strukturou (podobně jako u remote aplikace). Důležitý je `

`

4. Instalace Babelu

V obou adresářích, `host` i `remote`, nainstalujte závislosti Babelu:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. Spuštění aplikací

V obou adresářích, `host` i `remote`, přidejte do souboru `package.json` následující skript:

```json "scripts": { "start": "webpack serve" } ```

Nyní spusťte obě aplikace:

```bash cd remote npm start cd ../host npm start ```

Otevřete prohlížeč a přejděte na `http://localhost:3000`. Měli byste vidět aplikaci Host s vykreslenou komponentou Remote uvnitř.

Vysvětlení klíčových možností konfigurace:

Pokročilé techniky Module Federation

Module Federation nabízí mnoho pokročilých funkcí, které vám pomohou budovat ještě sofistikovanější mikro-frontendové architektury.

Dynamické Remotes

Místo pevného kódování URL adres vzdálených aplikací v konfiguraci Webpacku je můžete načítat dynamicky za běhu. To vám umožní snadno aktualizovat umístění vzdálených aplikací bez nutnosti znovu sestavovat hostitelskou aplikaci.

Například byste mohli uložit URL adresy vzdálených aplikací v konfiguračním souboru nebo databázi a načítat je dynamicky pomocí JavaScriptu.

```javascript // V webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Předpokládejme, že remoteUrl je něco jako 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // klíčem module federation je, že vzdálená aplikace je // dostupná pod jménem definovaným v remote aplikaci resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Nyní můžete načíst hostitelskou aplikaci s parametrem dotazu `?remote=http://localhost:3001/remoteEntry.js`

Verzované sdílené moduly

Module Federation dokáže automaticky spravovat verzování a deduplikaci sdílených modulů, aby zajistila, že je načtena pouze jedna kompatibilní verze každého modulu. To je obzvláště důležité při práci s velkými a komplexními aplikacemi, které mají mnoho závislostí.

V konfiguraci Webpacku můžete specifikovat rozsah verzí pro každý sdílený modul.

```javascript // V webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

Vlastní načítací moduly (Module Loaders)

Module Federation vám umožňuje definovat vlastní načítací moduly, které lze použít k načítání modulů z různých zdrojů nebo v různých formátech. To může být užitečné pro načítání modulů z CDN nebo z vlastního registru modulů.

Sdílení stavu mezi mikro-frontendy

Jednou z výzev mikro-frontendových architektur je sdílení stavu mezi různými mikro-frontendy. Existuje několik přístupů, které můžete k řešení této výzvy použít:

Osvědčené postupy pro implementaci mikro-frontendů s Module Federation

Zde jsou některé osvědčené postupy, které je třeba mít na paměti při implementaci mikro-frontendů s Module Federation:

Příklady použití Module Federation v praxi

Ačkoli konkrétní případové studie jsou často důvěrné, zde jsou některé zobecněné scénáře, kde může být Module Federation neuvěřitelně užitečná:

Závěr

JavaScript Module Federation ve Webpack 5 poskytuje výkonný a flexibilní způsob budování mikro-frontendových architektur. Umožňuje vám sdílet kód mezi samostatně kompilovanými JavaScriptovými aplikacemi za běhu, což umožňuje nezávislé nasazení, technologickou rozmanitost a zlepšenou autonomii týmu. Dodržováním osvědčených postupů uvedených v této příručce můžete využít Module Federation k budování škálovatelných, udržovatelných a inovativních webových aplikací.

Budoucnost frontendového vývoje se nepochybně přiklání k modulárním a distribuovaným architekturám. Module Federation poskytuje klíčový nástroj pro budování těchto moderních systémů, který umožňuje týmům vytvářet komplexní aplikace s větší rychlostí, flexibilitou a odolností. Jak technologie dospívá, můžeme očekávat, že se objeví ještě inovativnější případy použití a osvědčené postupy.