Moduulien ja komponenttien jakaminen
Oppikaa tarjoamaan komponentteja remote-sovelluksesta ja käyttämään niitä host-sovelluksessa.
Moduulien ja komponenttien jakaminen on ilmainen Micro Frontends -arkkitehtuuri Module Federationilla-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Micro Frontends -arkkitehtuuri Module Federationilla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Micro Frontends -arkkitehtuuri Module Federationilla-kurssilla on yhteensä 4 oppituntia.
Johdatus moduulien jakamiseen
Tässä oppitunnissa perehdymme Micro Frontends -arkkitehtuurin ytimeen: koodin jakamiseen!
Opimme, miten yksi sovellus voi "julkaista" komponenttejaan tai moduulejaan ja toinen sovellus käyttää niitä. Tämä on olennaista aidosti itsenäisten mutta yhteistyöhön kykenevien federated-sovellusten rakentamisessa.
Julkaistujen moduulien ymmärtäminen
Julkaistu moduuli on koodin osa, kuten React-komponentti, apuohjelmafunktio tai jopa tietovarasto, jonka yksi Micro Frontend -sovellus päättää asettaa muiden sovellusten saataville.
- Ajatelkaa sitä kirjaston julkaisemisena.
- Sovellusta, joka asettaa sen saataville, kutsutaan etäsovellukseksi.
- Se määritetään etäsovelluksen Webpack-asetuksissa.
Miten etäsovellus julkaisee moduuleja
Moduulin julkaisemiseksi määritätte ModuleFederationPlugin-lisäosan etäsovelluksen webpack.config.js-tiedostossa. exposes-ominaisuus määrittää julkaistavat moduulit.
Määritätte moduulille julkisen nimen ja yhdistätte sen paikalliseen polkuun.
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ... other webpack config ...
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.jsx',
'./Header': './src/components/Header.jsx'
},
shared: ['react', 'react-dom']
})
]
};Esimerkki: jaettu painikkeemme
Kuvitellaan yksinkertainen React-painikekomponentti, jonka etäsovelluksemme haluaa jakaa. Komponentti sijaitsee tiedostossa ./src/components/Button.jsx.
Se on tavallinen React-komponentti siihen asti, kunnes julkaisemme sen.
// src/components/Button.jsx
import React from 'react';
const Button = ({ onClick, children }) => {
return (
<button
onClick={onClick}
style={{
padding: '10px 20px',
backgroundColor: '#007bff',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
}}
>
{children}
</button>
);
};
export default Button;Etämoduulien käyttäminen
Toisaalta etämoduuli on moduuli, jota sovellus haluaa käyttää, mutta jota ylläpitää toinen federated-sovellus.
- Sovellusta, joka käyttää moduulia, kutsutaan isäntäsovellukseksi.
- Isännän on tiedettävä, mistä etäsovelluksen julkaistut moduulit löytyvät.
Miten isäntä käyttää moduuleja
Isäntäsovellus käyttää myös ModuleFederationPlugin-lisäosaa. Tässä määritätte remotes-ominaisuuden, joka yhdistää paikallisen aliaksen etäsovelluksen aloituspisteeseen.
Aloituspiste on yleensä remoteEntry.js, jonka etäsovelluksen Webpack-koonti luo.
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ... other webpack config ...
plugins: [
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};Jaettujen komponenttien tuominen ja käyttäminen
Kun määritykset ovat kunnossa, isäntäsovellus voi tuoda etäkomponentin aivan kuin se olisi paikallinen moduuli. Webpack huolehtii Module Federationin avulla dynaamisesta lataamisesta etäosoitteesta.
Kokeilkaa tämän yksinkertaisen esimerkin suorittamista:
// This simulates a host app importing a remote component.
// In a real setup, 'remoteApp/Button' would resolve to the
// component exposed by the 'remoteApp' through Module Federation.
import React from 'react';
import ReactDOM from 'react-dom/client';
// Imagine 'remoteApp/Button' is the component we exposed earlier
// This import is resolved by Webpack's Module Federation Plugin
const RemoteButton = React.lazy(() => import('remoteApp/Button'));
function App() {
return (
<div>
<h1>Host Application</h1>
<React.Suspense fallback={<div>Loading Remote Button...</div>}>
<RemoteButton onClick={() => alert('Button Clicked!')}>
Click Me From Remote!
</RemoteButton>
</React.Suspense>
</div>
);
}
// Full entry point for a runnable React app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);Kulissien takana: dynaaminen lataaminen
Kun isäntäsovellus yrittää tuoda moduulin remoteApp/Button, Webpack ei etsi sitä paikallisesta node_modules-hakemistosta. Sen sijaan se käyttää remotes-määritystä seuraavasti:
- Hakee
remoteEntry.js-tiedoston määritetystä URL-osoitteesta. - Lataa julkaistun
Button-moduulin etämerkinnästä. - Tämä tapahtuu dynaamisesti ajonaikana, mikä mahdollistaa toisistaan riippumattomat julkaisut!
Jakamisen parhaat käytännöt
Kun määrität exposes- ja remotes-asetuksia, pidä seuraavat vinkit mielessä:
- Selkeä nimeäminen: Käytä julkaistuille moduuleille kuvaavia nimiä (esim.
./UserProfileCard). - Yhdenmukaiset aliakset: Varmista, että isäntäsovelluksen etäaliakset ovat helposti ymmärrettäviä (esim.
marketingApp). - Suhteelliset polut: Käytä etäsovelluksessa julkaistuille moduuleille suhteellisia polkuja (
./src/...).
Testatkaa ymmärrystänne
Olette oppineet, miten moduuleja julkaistaan ja käytetään. Tarkistetaan seuraavaksi, miten hyvin ymmärrätte keskeisen määrityksen!
Oppitunnin yhteenveto ja seuraavat vaiheet
Hienoa työtä! Olette oppineet Webpack Module Federation -toiminnon moduulien jakamisen perusmekanismit:
- Julkaiseminen: Etäsovellukset käyttävät
exposes-asetusta komponenttien julkaisemiseen. - Käyttäminen: Isäntäsovellukset käyttävät
remotes-asetusta näiden komponenttien tuomiseen ja käyttämiseen. - Tämä dynaaminen lataus mahdollistaa toisistaan riippumattoman kehityksen ja julkaisemisen.
Seuraavaksi rakennamme yksinkertaisen federated-sovelluksen alusta alkaen ja sovellamme näitä käsitteitä käytäntöön!
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Moduulien ja komponenttien jakaminen” ilmainen?
Kyllä – oppitunnin ”Moduulien ja komponenttien jakaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Micro Frontends -arkkitehtuuri Module Federationilla-kurssin, päivitä CoddyKit PROhon. Micro Frontends -arkkitehtuuri Module Federationilla-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Moduulien ja komponenttien jakaminen”?
Oppikaa tarjoamaan komponentteja remote-sovelluksesta ja käyttämään niitä host-sovelluksessa. Harjoittelet Micro Frontends -arkkitehtuuri Module Federationilla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Micro Frontends -arkkitehtuuri Module Federationilla-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Micro Frontends -arkkitehtuuri Module Federationilla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Moduulien ja komponenttien jakaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Micro Frontends -arkkitehtuuri Module Federationilla-oppitunnilla?
Kyllä. Jokainen Micro Frontends -arkkitehtuuri Module Federationilla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Projektin määritys ja konfigurointi
- Moduulien ja komponenttien jakaminen
- Yksinkertaisen federated-sovelluksen rakentaminen
- Federated-sovelluksen ajaminen ja virheenkorjaus paikallisesti