Webpack 6ã®JavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã§ãŠã§ãéçºã®æªæ¥ãæããŸãããã®é©æ°æè¡ããã¹ã±ãŒã©ãã«ã§ç¬ç«ããã°ããŒãã«ãªãã€ã¯ãããã³ããšã³ããå®çŸããäžçäžã®ããŒã ãåã¥ããæ¹æ³ãã芧ãã ããã
Webpack 6ã«ããJavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ïŒã°ããŒãã«ãªæ¬¡äžä»£ãã€ã¯ãããã³ããšã³ãã匷åãã
æ¥éã«é²åãããŠã§ãéçºã®äžçã«ãããŠãå€§èŠæš¡ãªãšã³ã¿ãŒãã©ã€ãºçŽã®ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšã¯ãã¹ã±ãŒã©ããªãã£ãããŒã ã³ã©ãã¬ãŒã·ã§ã³ãä¿å®æ§ã«é¢ããè€éãªèª²é¡ããã°ãã°æç€ºããŸãããã€ãŠã¯äž»æµã ã£ãåŸæ¥ã®ã¢ããªã·ãã¯ãªããã³ããšã³ãã¢ãŒããã¯ãã£ã¯ãçŸä»£ã®ä¿æãªéçºãµã€ã¯ã«ãå°ççã«åæ£ããããŒã ã®èŠæ±ã«å¯Ÿå¿ããã®ã«èŠåŽããŠããŸããããã¢ãžã¥ã©ãŒã§ãç¬ç«ããŠãããã€å¯èœã§ãæè¡çã«æè»ãªãœãªã¥ãŒã·ã§ã³ãžã®æ¢æ±ãããã€ã¯ãããã³ããšã³ãã®åºç¯ãªæ¡çšã«ã€ãªãããŸãããããã¯ããã€ã¯ããµãŒãã¹ã®ååãããã³ããšã³ãã«æ¡åŒµããã¢ãŒããã¯ãã£ã¹ã¿ã€ã«ã§ãã
ãã€ã¯ãããã³ããšã³ãã¯åŠå®ã§ããªãå©ç¹ãæäŸããŸããããã®å®è£ ã¯æŽå²çã«ãã³ãŒãå ±æãäŸåé¢ä¿ç®¡çãããã³å®è¡æçµ±åã®ããã®è€éãªã¡ã«ããºã ã䌎ããŸãããããã§ãWebpack 5ã§å°å ¥ãããæŠå¿µçãªãWebpack 6ãã®ãããªå°æ¥ã®ã€ãã¬ãŒã·ã§ã³ã§é²åãç¶ããç»æçãªæ©èœã§ããJavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ããå€é©çãªãœãªã¥ãŒã·ã§ã³ãšããŠç»å ŽããŸããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãç¬ç«ããã¢ããªã±ãŒã·ã§ã³ãå®è¡æã«ã³ãŒããšäŸåé¢ä¿ãåçã«å ±æããæ¹æ³ãåèããç§ãã¡ã忣ãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã»ãããã€ããæ¹æ³ãæ ¹æ¬çã«å€ããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ãç¹ã«æ¬¡äžä»£ã®Webpackèœåã®æèã«ãããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®åãæ¢ããçã«ã¹ã±ãŒã©ãã«ã§å埩åã®ãããã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ã®æ§ç¯ãç®æãã°ããŒãã«ãªéçºããŒã ãžã®ãã®æ·±é ãªåœ±é¿ãå®èšŒããŸãã
ããã³ããšã³ãã¢ãŒããã¯ãã£ã®é²åïŒã¢ããªã¹ãããã€ã¯ãããã³ããšã³ããž
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®éèŠæ§ãçè§£ããã«ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ã®é²åãšããã解決ããåé¡ã«ã€ããŠã®çãæ ãå¿ èŠã§ãã
ã¢ããªã·ãã¯ããã³ããšã³ãïŒéå»ãšãã®éç
é·å¹Žã«ãããããŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããæšæºçãªã¢ãããŒãã¯ãåäžã§å€§èŠæš¡ãªãå¯çµåããããã³ããšã³ãã³ãŒãããŒã¹ãããªãã¡ã¢ããªã¹ã§ããããã¹ãŠã®æ©èœãã³ã³ããŒãã³ããããžãã¹ããžãã¯ããã®äžã€ã®ã¢ããªã±ãŒã·ã§ã³å ã«ååšããŠããŸãããå°èŠæš¡ãªãããžã§ã¯ãã§ã¯åçŽæå¿«ã§ãããã¢ããªã±ãŒã·ã§ã³ãæé·ããã«ã€ããŠã¢ããªã¹ã¯æ¥éã«æ±ãã«ãããªããŸãïŒ
- ã¹ã±ãŒã©ããªãã£ã®èª²é¡ïŒ ã¢ããªã±ãŒã·ã§ã³ã®äžéšåã§ã®å°ããªå€æŽããããã³ããšã³ãå šäœã®ãªãã«ããšåãããã€ãå¿ èŠãšããããšãå€ããé »ç¹ãªæŽæ°ãç ©éã§ãªã¹ã¯ã®é«ããã®ã«ããŸãã
- ããŒã ã®ããã«ããã¯ïŒ åäžã®ã³ãŒãããŒã¹ã§äœæ¥ããå€§èŠæš¡ãªããŒã ã¯ãé »ç¹ã«ããŒãžã³ã³ããªã¯ãã«ééããéçºãµã€ã¯ã«ã®é å»¶ãšçç£æ§ã®äœäžã«ã€ãªãããŸãã
- æè¡çããã¯ã€ã³ïŒ ã¢ããªã±ãŒã·ã§ã³å šäœã«åœ±é¿ãäžããããšãªãæ°ããæè¡ãå°å ¥ããããæ¢åã®ãã®ãã¢ããã°ã¬ãŒããããããããšãå°é£ã§ãã€ãããŒã·ã§ã³ãé»å®³ããæè¡çè² åµãçã¿åºããŸãã
- ãããã€ã®è€éãïŒ äžã€ã®ãããã€ãšã©ãŒãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹å šäœãããŠã³ãããå¯èœæ§ããããŸãã
ãã€ã¯ãããã³ããšã³ãã®å°é ïŒä¿ææ§ãšã¹ã±ãŒã©ããªãã£ã®è§£æŸ
ããã¯ãšã³ãéçºã«ããããã€ã¯ããµãŒãã¹ã®æåã«è§Šçºããããã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ã¹ã¿ã€ã«ã¯ãã¢ããªã·ãã¯ãªããã³ããšã³ããããå°ãããç¬ç«ããèªå·±å®çµããã¢ããªã±ãŒã·ã§ã³ã«åå²ããããšãææ¡ããŸããåãã€ã¯ãããã³ããšã³ãã¯ãå°éã®ã¯ãã¹ãã¡ã³ã¯ã·ã§ãã«ããŒã ã«ãã£ãŠææãããéçºãããããã€ãéçšãŸã§ã®ã©ã€ããµã€ã¯ã«å šäœãæ åœããŸããäž»ãªå©ç¹ã¯æ¬¡ã®ãšããã§ãïŒ
- ç¬ç«ããéçºãšãããã€ïŒ ããŒã ã¯ãã€ã¯ãããã³ããšã³ããç¬ç«ããŠéçºããã¹ãããããã€ã§ãããããæ©èœã®æäŸãå éããåžå Žæå ¥ãŸã§ã®æéãççž®ãããŸãã
- æè¡ã®éäŸåæ§ïŒ ç°ãªããã€ã¯ãããã³ããšã³ããç°ãªããã¬ãŒã ã¯ãŒã¯ïŒäŸïŒReactãVueãAngularïŒã䜿çšããŠæ§ç¯ã§ãããããããŒã ã¯ä»äºã«æé©ãªããŒã«ãéžæããããã¬ã¬ã·ãŒæè¡ããåŸã ã«ç§»è¡ãããã§ããŸãã
- ã¹ã±ãŒã©ããªãã£ã®åäžïŒ ã¢ããªã±ãŒã·ã§ã³ã®åã ã®éšåãç¬ç«ããŠã¹ã±ãŒã«ã§ããé害ã¯ç¹å®ã®ãã€ã¯ãããã³ããšã³ãã«éå®ããããããã·ã¹ãã å šäœã®å埩åãåäžããŸãã
- ä¿å®æ§ã®åäžïŒ å°ãããçŠç¹ã®çµãããã³ãŒãããŒã¹ã¯ãçè§£ã管çããããã°ã容æã«ãªããŸãã
ãããã®å©ç¹ã«ããããããããã€ã¯ãããã³ããšã³ãã¯ãç¹ã«å ±éã³ãŒãïŒãã¶ã€ã³ã·ã¹ãã ããŠãŒãã£ãªãã£ã©ã€ãã©ãªãªã©ïŒã®å ±æãå ±æäŸåé¢ä¿ïŒäŸïŒReactãLodashïŒã®ç®¡çããããŠç¬ç«æ§ãç ç²ã«ããããšãªãå®è¡æã®çµ±åã調æŽããããšã«é¢ããŠãç¬èªã®èª²é¡ããããããŸãããåŸæ¥ã®ã¢ãããŒãã¯ããã°ãã°è€éãªãã«ãæã®äŸåé¢ä¿ç®¡çãå ±ænpmããã±ãŒãžããŸãã¯ã³ã¹ãã®ãããå®è¡æèªã¿èŸŒã¿ã¡ã«ããºã ã䌎ããŸãããããããããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãåããã®ã£ãããªã®ã§ãã
Webpack 6ãšã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®å°å ¥ïŒãã©ãã€ã ã·ãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯åœåWebpack 5ã§å°å ¥ãããŸãããããã®å é²çãªèšèšã¯ãæŠå¿µçãªãWebpack 6ãæä»£ã«æåŸ ãããèœåãå«ããå°æ¥ã®WebpackããŒãžã§ã³ã®ç€ãšããŠäœçœ®ã¥ããããŠããŸããããã¯ãç§ãã¡ã忣ãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§æ³ããæ§ç¯ããæ¹æ³ã«ãããæ ¹æ¬çãªã·ããã衚ããŠããŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãšã¯äœãïŒ
ãã®æ žå¿ã«ãããŠãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãããWebpackãã«ãããã®ã¢ãžã¥ãŒã«ã®äžéšãä»ã®Webpackãã«ãã«å ¬éããéã«ä»ã®Webpackãã«ãã«ãã£ãŠå ¬éãããã¢ãžã¥ãŒã«ãå©çšããããšãå¯èœã«ããŸããéèŠãªã®ã¯ãããããã«ãæã§ã¯ãªããå®è¡æã«åçã«è¡ãããããšã§ããããã¯ãã¢ããªã±ãŒã·ã§ã³ãç¬ç«ããŠãããã€ãããä»ã®ã¢ããªã±ãŒã·ã§ã³ãããå®éã«çšŒåããŠããã³ãŒããå ±æããå©çšã§ããããšãæå³ããŸãã
ã¡ã€ã³ã¢ããªã±ãŒã·ã§ã³ïŒããã¹ããïŒããå¥ã®ç¬ç«ããã¢ããªã±ãŒã·ã§ã³ïŒããªã¢ãŒããïŒã®ã³ã³ããŒãã³ããå¿ èŠãšããã·ããªãªãæ³åããŠã¿ãŠãã ãããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã䜿ãã°ããã¹ãã¯åã«ãªã¢ãŒãã³ã³ããŒãã³ãã䜿çšããæå³ã宣èšããã ãã§ãWebpackãåçãªèªã¿èŸŒã¿ãšçµ±åãåŠçããéè€ãé²ãããã®å ±éäŸåé¢ä¿ã®ã€ã³ããªãžã§ã³ããªå ±æãè¡ããŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®äž»èŠãªæŠå¿µïŒ
- ãã¹ãïŒãŸãã¯ã³ã³ããïŒïŒ ä»ã®ã¢ããªã±ãŒã·ã§ã³ã«ãã£ãŠå ¬éãããã¢ãžã¥ãŒã«ãå©çšããã¢ããªã±ãŒã·ã§ã³ã
- ãªã¢ãŒãïŒ ãã®ã¢ãžã¥ãŒã«ã®äžéšãä»ã®ã¢ããªã±ãŒã·ã§ã³ã«å ¬éããã¢ããªã±ãŒã·ã§ã³ãã¢ããªã±ãŒã·ã§ã³ã¯ãã¹ããšãªã¢ãŒãã®äž¡æ¹ã«ãªãããšãã§ããŸãã
- ExposesïŒå ¬éïŒïŒ ã¢ããªã±ãŒã·ã§ã³ãä»è ã«å©çšå¯èœã«ããã¢ãžã¥ãŒã«ã
- RemotesïŒãªã¢ãŒãïŒïŒ ãã¹ãã¢ããªã±ãŒã·ã§ã³ãå©çšãããã¢ããªã±ãŒã·ã§ã³ïŒããã³ãã®å ¬éã¢ãžã¥ãŒã«ïŒã
- SharedïŒå ±æïŒïŒ å ±éã®äŸåé¢ä¿ïŒReactãVueãLodashãªã©ïŒããã§ãã¬ãŒã·ã§ã³ãããã¢ããªã±ãŒã·ã§ã³éã§ã©ã®ããã«æ±ãããã¹ãããå®çŸ©ããŸããããã¯ãã³ãã«ãµã€ãºãæé©åããäºææ§ã確ä¿ããããã«éåžžã«éèŠã§ãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ããã€ã¯ãããã³ããšã³ãã®èª²é¡ã«ã©ã察åŠãããïŒ
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ããããŸã§ãã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ãæ©ãŸããŠããè€éãã«çŽæ¥åãçµã¿ãæ¯é¡ã®ãªããœãªã¥ãŒã·ã§ã³ãæäŸããŸãïŒ
- çã®å®è¡æçµ±åïŒ iframeãã«ã¹ã¿ã JavaScriptãã€ã¯ããªãŒã±ã¹ãã¬ãŒã¿ãŒã«äŸåããŠãã以åã®ãœãªã¥ãŒã·ã§ã³ãšã¯ç°ãªããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãå®è¡æã«ç°ãªãã¢ããªã±ãŒã·ã§ã³ããã®ã³ãŒããã·ãŒã ã¬ã¹ã«çµ±åããããã®ãã€ãã£ããªWebpackã¡ã«ããºã ãæäŸããŸããã³ã³ããŒãã³ãã颿°ããŸãã¯ããŒãžå šäœãããããããã¹ãã¢ããªã±ãŒã·ã§ã³ã®äžéšã§ãããã®ããã«åçã«èªã¿èŸŒãã§ã¬ã³ããªã³ã°ã§ããŸãã
- ãã«ãæäŸåé¢ä¿ã®æé€ïŒ ããŒã ã¯ãã¯ãå ±éã³ã³ããŒãã³ããnpmã¬ãžã¹ããªã«å ¬éããè€æ°ã®ãªããžããªéã§ããŒãžã§ã³ã管çããå¿ èŠããããŸãããã³ã³ããŒãã³ãã¯çŽæ¥å ¬éãããå©çšããããããéçºã¯ãŒã¯ãããŒãå€§å¹ ã«ç°¡çŽ åãããŸãã
- ç°¡çŽ åãããã¢ãã¬ã/ããªã¬ãæŠç¥ïŒ ã¢ãã¬ãïŒå šãããžã§ã¯ããåäžãªããžããªã§ç®¡çïŒãããªã¬ãïŒè€æ°ã®ãªããžããªïŒããéžæãããã«ããããããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯å ±æãå¹çåããŸããã¢ãã¬ãã§ã¯ãåé·ãªã³ã³ãã€ã«ãé¿ããããšã§ãã«ããæé©åããŸããããªã¬ãã§ã¯ãè€éãªãã«ããã€ãã©ã€ã³èšå®ãªãã§ã·ãŒã ã¬ã¹ãªãªããžããªéå ±æãå¯èœã«ããŸãã
- æé©åãããå
±æäŸåé¢ä¿ïŒ
sharedèšå®ã¯ç»æçã§ããè€æ°ã®ãã§ãã¬ãŒã·ã§ã³ãããã¢ããªã±ãŒã·ã§ã³ãåãã©ã€ãã©ãªïŒäŸïŒç¹å®ã®ããŒãžã§ã³ã®ReactïŒã«äŸåããŠããå Žåããã®ã©ã€ãã©ãªã®ã€ã³ã¹ã¿ã³ã¹ããŠãŒã¶ãŒã®ãã©ãŠã¶ã«1ã€ã ãèªã¿èŸŒãŸããããã«ä¿èšŒãããã³ãã«ãµã€ãºãå€§å¹ ã«åæžããã°ããŒãã«ãªã¢ããªã±ãŒã·ã§ã³ããã©ãŒãã³ã¹ãåäžãããŸãã - åçèªã¿èŸŒã¿ãšããŒãžã§ãã³ã°ïŒ ãªã¢ãŒãã¯ãªã³ããã³ãã§èªã¿èŸŒãããšãã§ããå¿ èŠãªã³ãŒãã ããå¿ èŠãªãšãã«ãã§ãããããããšãæå³ããŸããããã«ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯å ±æäŸåé¢ä¿ã®ç°ãªãããŒãžã§ã³ã管çããã¡ã«ããºã ãæäŸããäºææ§ãšå®å šãªã¢ããã°ã¬ãŒãã®ããã®å ç¢ãªãœãªã¥ãŒã·ã§ã³ãæäŸããŸãã
- å®è¡æã®ãã¬ãŒã ã¯ãŒã¯éäŸåæ§ïŒ ç°ãªããã¬ãŒã ã¯ãŒã¯ã®åæèšå®ã«ã¯è¥å¹²ã®ããªãšãŒã·ã§ã³ããããããããŸããããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯Reactãã¹ããVueã³ã³ããŒãã³ããããããã¯ãã®éãå©çšããããšãå¯èœã«ããæè¡éžæãããæè»ã§å°æ¥æ§ã®ãããã®ã«ããŸããããã¯ã倿§ãªæè¡ã¹ã¿ãã¯ãæã€å€§äŒæ¥ã段éçãªç§»è¡äžã«ç¹ã«äŸ¡å€ããããŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³èšå®ã®è©³çŽ°è§£èª¬ïŒæŠå¿µçã¢ãããŒã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®å®è£
ã¯ãWebpackèšå®å
ã®ModuleFederationPluginã®èšå®ãäžå¿ãšãªããŸãããã¹ãã¢ããªã±ãŒã·ã§ã³ãšãªã¢ãŒãã¢ããªã±ãŒã·ã§ã³ã®äž¡æ¹ã§ãããã©ã®ããã«èšå®ãããããæŠå¿µçã«èŠãŠãããŸãããã
ModuleFederationPluginïŒã³ã¢èšå®
ãã®ãã©ã°ã€ã³ã¯webpack.config.jsãã¡ã€ã«ã§ã€ã³ã¹ã¿ã³ã¹åãããŸãïŒ
new webpack.container.ModuleFederationPlugin({ /* options */ })
äž»èŠãªèšå®ãªãã·ã§ã³ã®èª¬æïŒ
-
name:ããã¯ãçŸåšã®Webpackãã«ãïŒã³ã³ããïŒã®ã°ããŒãã«ã§äžæãªååã§ããä»ã®ã¢ããªã±ãŒã·ã§ã³ããã®ãã«ãããã¢ãžã¥ãŒã«ãå©çšãããå Žåããã®ååã§åç §ããŸããäŸãã°ãã¢ããªã±ãŒã·ã§ã³åããDashboardãã§ããã°ã
nameã¯'dashboardApp'ã®ããã«ãªãã§ããããããã¯ããã§ãã¬ãŒã·ã§ã³ããããšã³ã·ã¹ãã å šäœã§ã®èå¥ã«ãšã£ãŠäžå¯æ¬ ã§ãã -
filename:ãªã¢ãŒããšã³ããªãã€ã³ãã®åºåãã¡ã€ã«åãæå®ããŸããããã¯ãä»ã®ã¢ããªã±ãŒã·ã§ã³ãå ¬éãããã¢ãžã¥ãŒã«ã«ã¢ã¯ã»ã¹ããããã«èªã¿èŸŒããã¡ã€ã«ã§ããäžè¬çã«ã¯
'remoteEntry.js'ã®ãããªååã«ããããšãå€ãã§ãããã®ãã¡ã€ã«ã¯ãå ¬éãããã¢ãžã¥ãŒã«ã®ãããã§ã¹ãããã³ããŒããŒãšããŠæ©èœããŸãã -
exposes:ãã®Webpackãã«ããä»è ã«å©çšå¯èœã«ããã¢ãžã¥ãŒã«ãå®çŸ©ãããªããžã§ã¯ãã§ããããŒã¯ä»ã®ã¢ããªã±ãŒã·ã§ã³ããããã®ã¢ãžã¥ãŒã«ãåç §ããéã«äœ¿çšããååã§ãããå€ã¯ãããžã§ã¯ãå ã®å®éã®ã¢ãžã¥ãŒã«ãžã®ããŒã«ã«ãã¹ã§ããäŸãã°ã
{'./Button': './src/components/Button.jsx'}ã¯ãButtonã³ã³ããŒãã³ããButtonãšããŠå ¬éããŸãã -
remotes:ãã®Webpackãã«ããå©çšããããªã¢ãŒãã¢ããªã±ãŒã·ã§ã³ïŒããã³ãã®ãšã³ããªãã€ã³ãïŒãå®çŸ©ãããªããžã§ã¯ãã§ããããŒã¯ãã®ãªã¢ãŒãããã¢ãžã¥ãŒã«ãã€ã³ããŒãããéã«äœ¿çšããååïŒäŸïŒ
'cartApp'ïŒãå€ã¯ãã®ãªã¢ãŒãã®remoteEntry.jsãã¡ã€ã«ãžã®URLïŒäŸïŒ'cartApp@http://localhost:3001/remoteEntry.js'ïŒã§ããããã«ããããã¹ãã¢ããªã±ãŒã·ã§ã³ã¯ãªã¢ãŒãã¢ãžã¥ãŒã«ã®å®çŸ©ãã©ãã§èŠã€ããããç¥ãããšãã§ããŸãã -
shared:ããããæã匷åã§è€éãªãªãã·ã§ã³ã§ããå ±éã®äŸåé¢ä¿ããã§ãã¬ãŒã·ã§ã³ãããã¢ããªã±ãŒã·ã§ã³éã§ã©ã®ããã«å ±æãããã¹ãããå®çŸ©ããŸããå ±æãã¹ãããã±ãŒãžåã®ãªã¹ãïŒäŸïŒ
['react', 'react-dom']ïŒãæå®ã§ããŸããå ±æãããåããã±ãŒãžã«ã€ããŠã以äžãèšå®ã§ããŸãïŒsingleton:trueã«ãããšãè€æ°ã®ãªã¢ãŒããèŠæ±ããŠããäŸåé¢ä¿ã®ã€ã³ã¹ã¿ã³ã¹ãã¢ããªã±ãŒã·ã§ã³ã«1ã€ã ãèªã¿èŸŒãŸããããšãä¿èšŒãããŸãïŒReactãReduxã®ãããªã©ã€ãã©ãªã«ã¯äžå¯æ¬ ã§ãïŒãrequiredVersion: å ±æäŸåé¢ä¿ã®èš±å®¹ãããããŒãžã§ã³ã®ã»ãã³ãã£ãã¯ããŒãžã§ãã³ã°ç¯å²ãæå®ããŸããstrictVersion:trueã«ãããšããã¹ãã®ããŒãžã§ã³ããªã¢ãŒãã®èŠæ±ããŒãžã§ã³ãšäžèŽããªãå Žåã«ãšã©ãŒãã¹ããŒããŸããeager: å ±æã¢ãžã¥ãŒã«ãéåæã§ã¯ãªããå³åº§ã«èªã¿èŸŒã¿ãŸããæ³šæããŠäœ¿çšããŠãã ããã
ãã®ã€ã³ããªãžã§ã³ããªå ±æã¡ã«ããºã ã¯ãåé·ãªããŠã³ããŒããé²ããããŒãžã§ã³ã®äºææ§ã確ä¿ããŸããããã¯ã忣ã¢ããªã±ãŒã·ã§ã³å šäœã§å®å®ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿ã€ããã«äžå¯æ¬ ã§ãã
å®è·µäŸïŒãã¹ããšãªã¢ãŒãã®èšå®è§£èª¬
1. ãªã¢ãŒãã¢ããªã±ãŒã·ã§ã³ïŒäŸïŒãååã«ã¿ãã°ããã€ã¯ãããã³ããšã³ãïŒ
ãã®ã¢ããªã±ãŒã·ã§ã³ã¯ãååãªã¹ãã³ã³ããŒãã³ããå
¬éããŸãããã®webpack.config.jsã«ã¯ä»¥äžãå«ãŸããŸãïŒ
// ... other webpack config
plugins: [
new webpack.container.ModuleFederationPlugin({
name: 'productCatalog',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList.jsx',
'./ProductDetail': './src/components/ProductDetail.jsx'
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
// ... other shared dependencies
}
})
]
// ...
ããã§ãproductCatalogã¢ããªã±ãŒã·ã§ã³ã¯ProductListãšProductDetailãå
¬éããŸãããŸããreactãšreact-domãå
±æã·ã³ã°ã«ãã³ãšããŠå®£èšããç¹å®ã®ããŒãžã§ã³ç¯å²ãèŠæ±ããŠããŸããããã¯ããããã¹ããReactãå¿
èŠãšããå Žåããã§ã«èªã¿èŸŒãŸããŠããããŒãžã§ã³ã䜿çšããããšããããæå®ããããã®ããŒãžã§ã³ãäžåºŠã ãèªã¿èŸŒãããšãæå³ããŸãã
2. ãã¹ãã¢ããªã±ãŒã·ã§ã³ïŒäŸïŒãã¡ã€ã³ããŒã¿ã«ãã·ã§ã«ïŒ
ãã®ã¢ããªã±ãŒã·ã§ã³ã¯productCatalogããProductListã³ã³ããŒãã³ããå©çšããŸãããã®webpack.config.jsã«ã¯ä»¥äžãå«ãŸããŸãïŒ
// ... other webpack config
plugins: [
new webpack.container.ModuleFederationPlugin({
name: 'mainPortal',
remotes: {
productCatalog: 'productCatalog@http://localhost:3001/remoteEntry.js'
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
// ... other shared dependencies
}
})
]
// ...
mainPortalã¯productCatalogããªã¢ãŒããšããŠå®çŸ©ãããã®ãšã³ããªãã¡ã€ã«ãæããŠããŸãããŸããReactãšReact DOMãå
±æãšããŠå®£èšãããªã¢ãŒããšã®äºææ§ãšéè€æé€ãä¿èšŒããŠããŸãã
3. ãã¹ãã§ãªã¢ãŒãã¢ãžã¥ãŒã«ãå©çšãã
èšå®ãå®äºãããšããã¹ãã¢ããªã±ãŒã·ã§ã³ã¯ãªã¢ãŒãã¢ãžã¥ãŒã«ãããŒã«ã«ã¢ãžã¥ãŒã«ã®ããã«åçã«ã€ã³ããŒãã§ããŸãïŒãã ããã€ã³ããŒããã¹ã¯ãªã¢ãŒãåãåæ ããŸãïŒïŒ
import React from 'react';
// Dynamically import the ProductList component from the remote 'productCatalog'
const ProductList = React.lazy(() => import('productCatalog/ProductList'));
function App() {
return (
<div>
<h1>Welcome to Our Main Portal</h1>
<React.Suspense fallback={<div>Loading Products...</div>}>
<ProductList />
</React.Suspense>
</div>
);
}
export default App;
ãã®èšå®ã«ãããmainPortalã¯productCatalogããŒã ã«ãã£ãŠå®å
šã«éçºã»ãããã€ãããProductListã³ã³ããŒãã³ããã¬ã³ããªã³ã°ã§ããçã®å®è¡æã³ã³ããžã·ã§ã³ã瀺ããŠããŸããReact.lazyãšSuspenseã®äœ¿çšã¯ããªã¢ãŒãã¢ãžã¥ãŒã«ã®éåæèªã¿èŸŒã¿ãåŠçããããã®äžè¬çãªãã¿ãŒã³ã§ãããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã«ããã¢ãŒããã¯ãã£ãã¿ãŒã³ãšæŠç¥
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãããã€ãã®åŒ·åãªã¢ãŒããã¯ãã£ãã¿ãŒã³ãå¯èœã«ããã°ããŒãã«äŒæ¥åãã«æè»ã§å ç¢ãªãã€ã¯ãããã³ããšã³ãã®ãããã€ãå®çŸããŸãã
å®è¡æçµ±åãšã·ãŒã ã¬ã¹ãªUIã³ã³ããžã·ã§ã³
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®æ žãšãªãçŽæã¯ãå®è¡æã«ç°ãªãUIããŒã¹ãç¹ãåãããèœåã§ããããã¯ä»¥äžã®ããšãæå³ããŸãïŒ
- å ±æã¬ã€ã¢ãŠããšã·ã§ã«ïŒ äž»èŠãªãã·ã§ã«ãã¢ããªã±ãŒã·ã§ã³ãããŒãžå šäœã®ã¬ã€ã¢ãŠãïŒããããŒãããã¿ãŒãããã²ãŒã·ã§ã³ïŒãå®çŸ©ããæå®ãããé åã«æ§ã ãªãã€ã¯ãããã³ããšã³ããåçã«èªã¿èŸŒãããšã§ãäžè²«æ§ã®ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåµåºããŸãã
- ã³ã³ããŒãã³ãã®åå©çšæ§ïŒ åã ã®ã³ã³ããŒãã³ãïŒäŸïŒãã¿ã³ããã©ãŒã ãããŒã¿ããŒãã«ãéç¥ãŠã£ãžã§ããïŒããã³ã³ããŒãã³ãã©ã€ãã©ãªããã€ã¯ãããã³ããšã³ããå ¬éããè€æ°ã®ã¢ããªã±ãŒã·ã§ã³ã§å©çšããããšã§ãäžè²«æ§ã確ä¿ããéçºãå éããŸãã
- ã€ãã³ãé§ååã³ãã¥ãã±ãŒã·ã§ã³ïŒ ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãã¢ãžã¥ãŒã«ã®èªã¿èŸŒã¿ãåŠçããäžæ¹ã§ããã€ã¯ãããã³ããšã³ãéã®éä¿¡ã¯ãã€ãã³ããã¹ãã¿ãŒã³ãå ±æç¶æ 管çïŒæ éã«ç®¡çããå ŽåïŒããŸãã¯ã°ããŒãã«ãªPub/Subã¡ã«ããºã ã«äŸåããããšãå€ãã§ããããã«ããããã§ãã¬ãŒã·ã§ã³ãããã¢ããªã±ãŒã·ã§ã³ã¯å¯çµåããããšãªãçžäºäœçšã§ããç¬ç«æ§ãç¶æã§ããŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã«ãããã¢ãã¬ã vs. ããªã¬ã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãäž¡æ¹ã®äžè¬çãªãªããžããªæŠç¥ããšã¬ã¬ã³ãã«ãµããŒãããŸãïŒ
- ã¢ãã¬ãã®åŒ·åïŒ ãã¹ãŠã®ãã€ã¯ãããã³ããšã³ããåäžã®ãªããžããªã«ååšããã¢ãã¬ãã§ããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯éåžžã«æçã§ããã¢ãã¬ãå ã®åå¥ã®ã¢ããªã±ãŒã·ã§ã³ãç¬ç«ããŠãã«ãããã³ãããã€ã§ããããã軜埮ãªå€æŽã®ããã«ãªããžããªå šäœããªãã«ãããå¿ èŠããªããªããŸããå ±æäŸåé¢ä¿ã¯å¹ççã«åŠçãããéçºãã€ãã©ã€ã³å šäœã§ã®ãã«ãæéãççž®ãããã£ãã·ã¥å©çšçãåäžãããŸãã
- ããªã¬ãã®ãšã³ãã¯ãŒã¡ã³ãïŒ åãã€ã¯ãããã³ããšã³ãã«åå¥ã®ãªããžããªã奜ãçµç¹ã«ãšã£ãŠãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ã²ãŒã ãã§ã³ãžã£ãŒã§ãããªããžããªéã®ã³ãŒãå ±æãšå®è¡æçµ±åã®ããã®å ç¢ãªãã€ãã£ãã¡ã«ããºã ãæäŸããè€éãªå éšããã±ãŒãžå ¬éã¯ãŒã¯ãããŒãã«ã¹ã¿ã ãã§ãã¬ãŒã·ã§ã³ããŒã«ãäžèŠã«ããŸããããŒã ã¯ãªããžããªã«å¯Ÿããå®å šãªèªåŸæ§ãç¶æãã€ã€ãçµ±äžãããã¢ããªã±ãŒã·ã§ã³äœéšã«è²¢ç®ã§ããŸãã
åçèªã¿èŸŒã¿ãããŒãžã§ãã³ã°ããããã¢ãžã¥ãŒã«ãªãã¬ãŒã¹ã¡ã³ã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®åçãªæ§è³ªã¯ãéèŠãªå©ç¹ãæäŸããŸãïŒ
- ãªã³ããã³ãèªã¿èŸŒã¿ïŒ ãªã¢ãŒãã¢ãžã¥ãŒã«ã¯éåæã«ãå¿
èŠãªãšãã«ã®ã¿èªã¿èŸŒãããšãã§ããããïŒäŸïŒ
React.lazy()ãåçimport()ã䜿çšïŒãåæããŒãžèªã¿èŸŒã¿æéãæ¹åãããŠãŒã¶ãŒã®åæãã³ãã«ãµã€ãºãåæžããŸãã - å
ç¢ãªããŒãžã§ãã³ã°ïŒ
sharedèšå®ã«ãããäŸåé¢ä¿ã®ããŒãžã§ã³ããã现ããå¶åŸ¡ã§ããŸããæ£ç¢ºãªããŒãžã§ã³ãããŒãžã§ã³ç¯å²ãæå®ãããããã©ãŒã«ããã¯ãèš±å¯ãããããããšã§ãå®å šã§å¶åŸ¡ãããã¢ããã°ã¬ãŒããå¯èœã«ãªããŸããããã¯ãå€§èŠæš¡ãªåæ£ã·ã¹ãã ã§ãäŸåé¢ä¿å°çããé²ãããã«äžå¯æ¬ ã§ãã - ãããã¢ãžã¥ãŒã«ãªãã¬ãŒã¹ã¡ã³ãïŒHMRïŒïŒ éçºäžãHMRã¯ãã§ãã¬ãŒã·ã§ã³ãããã¢ãžã¥ãŒã«éã§æ©èœããŸãããªã¢ãŒãã¢ããªã±ãŒã·ã§ã³ã®å€æŽããããŒãžå šäœã®ãªããŒããªãã§ãã¹ãã¢ããªã±ãŒã·ã§ã³ã«åæ ããããããéçºã®ãã£ãŒãããã¯ã«ãŒããå éããŸãã
ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒãšãšããžã³ã³ãã¥ãŒãã£ã³ã°
äž»ã«ã¯ã©ã€ã¢ã³ããµã€ãã®æ©èœã§ãããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯SSRæŠç¥ãšçµ±åããŠããã©ãŒãã³ã¹ãšSEOãåäžãããããšãã§ããŸãïŒ
- åæèªã¿èŸŒã¿ã®ããã®SSRïŒ éèŠãªã³ã³ããŒãã³ãã«ã€ããŠã¯ããã€ã¯ãããã³ããšã³ãããµãŒããŒã§ã¬ã³ããªã³ã°ããããšã§ãã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãšSEOãåäžãããããšãã§ããŸãããã®åŸãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ã¯ã©ã€ã¢ã³ããµã€ãã§ãããã®äºåã¬ã³ããªã³ã°ãããã³ã³ããŒãã³ãããã€ãã¬ãŒãã§ããŸãã
- ãšããžãµã€ãã³ã³ããžã·ã§ã³ïŒ ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®ååã¯ããšããžã³ã³ãã¥ãŒãã£ã³ã°ç°å¢ã«ãæ¡åŒµã§ãããŠãŒã¶ãŒã«ããè¿ãå Žæã§ãŠã§ãäœéšã®åçãªæ§æãšããŒãœãã©ã€ãŒãŒã·ã§ã³ãå¯èœã«ããã°ããŒãã«ãªèŠèŽè ã«ãšã£ãŠã®é å»¶ãæœåšçã«åæžããŸããããã¯æŽ»çºãªã€ãããŒã·ã§ã³ã®åéã§ãã
ã°ããŒãã«ããŒã ãšäŒæ¥ã«ãšã£ãŠã®ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®å©ç¹
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯åãªãæè¡çãœãªã¥ãŒã·ã§ã³ã§ã¯ãªããçµç¹çãªã€ããŒãã©ãŒã§ãããäžçäžã§æŽ»åãã倿§ãªããŒã ã®èªåŸæ§ãå¹çæ§ãæè»æ§ãä¿é²ããŸãã
ã¹ã±ãŒã©ããªãã£ã®åäžãšç¬ç«ããéçº
- 忣ãããæææš©ïŒ ç°ãªãã¿ã€ã ãŸãŒã³ãå°ççãªå Žæã«ããããŒã ããããããã®ãã€ã¯ãããã³ããšã³ããç¬ç«ããŠææãéçºããããã€ã§ããŸããããã«ãããããŒã éã®äŸåé¢ä¿ãæžãã䞊è¡éçºãå¯èœã«ãªããŸãã
- æ©èœæäŸã®é«éåïŒ ç¬ç«ãããããã€ãã€ãã©ã€ã³ã«ãããããŒã ã¯ã¢ããªã·ãã¯ãªãªãªãŒã¹ãµã€ã¯ã«ãåŸ ã€ããšãªããèªåãã¡ã®ãã€ã¯ãããã³ããšã³ãã®æ°æ©èœããã°ä¿®æ£ããªãªãŒã¹ã§ããŸããããã«ãããã©ãã«ããŠããŠãŒã¶ãŒãžã®äŸ¡å€æäŸãå€§å¹ ã«å éããŸãã
- ã³ãã¥ãã±ãŒã·ã§ã³ãªãŒããŒãããã®åæžïŒ ã¢ãžã¥ãŒã«ã®å¢çãšã€ã³ã¿ãŒãã§ãŒã¹ãæç¢ºã«å®çŸ©ããããšã§ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ããŒã éã®çµ¶ãéãªãåæçãªã³ãã¥ãã±ãŒã·ã§ã³ã®å¿ èŠæ§ãæå°éã«æãã圌ãããã¡ã€ã³åºæã®è²¬ä»»ã«éäžã§ããããã«ããŸãã
æè¡ã®éäŸåæ§ã𿮵éçãªç§»è¡
- 倿§ãªæè¡ã¹ã¿ãã¯ïŒ ã°ããŒãã«äŒæ¥ã¯ãã°ãã°æ§ã ãªããã³ããšã³ããã¬ãŒã ã¯ãŒã¯ãç¶æ¿ãŸãã¯æ¡çšããŸããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãäŸãã°Reactã§æ§ç¯ãããã¡ã€ã³ã¢ããªã±ãŒã·ã§ã³ããVueãAngularããããã¯å€ããã¬ãŒã ã¯ãŒã¯ã§æ§ç¯ããããã€ã¯ãããã³ããšã³ããã·ãŒã ã¬ã¹ã«çµ±åããããšãå¯èœã«ããŸããããã«ãããé«äŸ¡ãªäžæç§»è¡ã®å¿ èŠããªããªããŸãã
- 段éçãªè¿ä»£åïŒ ã¬ã¬ã·ãŒã¢ããªã±ãŒã·ã§ã³ã¯æ®µéçã«è¿ä»£åã§ããŸããæ°ããæ©èœãã»ã¯ã·ã§ã³ãã¢ãã³ãªãã¬ãŒã ã¯ãŒã¯ã䜿çšããŠãã€ã¯ãããã³ããšã³ããšããŠéçºããæ¢åã®ã¢ããªã±ãŒã·ã§ã³ã«åŸã ã«çµ±åããããšã§ããªã¹ã¯ãæžãããå¶åŸ¡ãããç§»è¡ãå¯èœã«ããŸãã
ããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž
- æé©åããããã³ãã«ãµã€ãºïŒ äŸåé¢ä¿ã®ã€ã³ããªãžã§ã³ããªå ±æãéããŠãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯å ±éã®ã©ã€ãã©ãªãäžåºŠããèªã¿èŸŒãŸããªãããšãä¿èšŒãããŠãŒã¶ãŒãããŠã³ããŒãããJavaScriptã®ç·éãå€§å¹ ã«åæžããŸããããã¯ãäœéãããã¯ãŒã¯ãã¢ãã€ã«ããã€ã¹ã®ãŠãŒã¶ãŒã«ãšã£ãŠç¹ã«æçã§ãã°ããŒãã«ãªèªã¿èŸŒã¿æéãæ¹åããŸãã
- å¹ççãªãã£ãã·ã³ã°ïŒ ãã§ãã¬ãŒã·ã§ã³ãããã¢ãžã¥ãŒã«ã¯ç¬ç«ããŠããããããã©ãŠã¶ã«ãã£ãŠåå¥ã«ãã£ãã·ã¥ã§ããŸãããªã¢ãŒãã¢ãžã¥ãŒã«ãæŽæ°ããããšããã®ç¹å®ã®ã¢ãžã¥ãŒã«ã®ãã£ãã·ã¥ã®ã¿ãç¡å¹åããŠåããŠã³ããŒãããã°ããããããã®åŸã®èªã¿èŸŒã¿ãé«éã«ãªããŸãã
- äœæããã©ãŒãã³ã¹ã®åäžïŒ ãªã¢ãŒããé å»¶èªã¿èŸŒã¿ããããšã§ããŠãŒã¶ãŒã®ãã©ãŠã¶ã¯çŸåšæäœããŠããã¢ããªã±ãŒã·ã§ã³ã®éšåã®ã³ãŒãã®ã¿ãããŠã³ããŒãããããããããããããšããå¿çæ§ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãå®çŸããŸãã
ã³ã¹ãå¹çãšãªãœãŒã¹ã®æé©å
- éè€äœæ¥ã®åæžïŒ ã³ã³ããŒãã³ãããã¶ã€ã³ã·ã¹ãã ããŠãŒãã£ãªãã£ã©ã€ãã©ãªã®ç°¡åãªå ±æãå¯èœã«ããããšã§ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ç°ãªãããŒã ãåãæ©èœãåæ§ç¯ããã®ãé²ããéçºæéãšãªãœãŒã¹ãç¯çŽããŸãã
- å¹çåããããããã€ãã€ãã©ã€ã³ïŒ ãã€ã¯ãããã³ããšã³ãã®ç¬ç«ãããããã€ã¯ãã¢ããªã·ãã¯ãªãããã€ã«äŒŽãè€éããšãªã¹ã¯ã軜æžããŸããCI/CDãã€ãã©ã€ã³ã¯ããã·ã³ãã«ãã€é«éã«ãªããå¿ èŠãªãªãœãŒã¹ãšèª¿æŽãå°ãªããªããŸãã
- ã°ããŒãã«ãªäººæè²¢ç®ã®æå€§åïŒ ããŒã ã¯äžçäžã«åæ£ã§ãããããããç¹å®ã®ãã€ã¯ãããã³ããšã³ãã«éäžã§ããŸããããã«ãããçµç¹ã¯å¯çµåã·ã¹ãã ã®ã¢ãŒããã¯ãã£äžã®å¶çŽãªãã«ãã°ããŒãã«ãªäººæããŒã«ããã广çã«æŽ»çšã§ããŸãã
å®è·µçãªèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯çµ¶å€§ãªåãæäŸããŸãããç¹ã«ã°ããŒãã«ãªèŠèŽè åãã«è€éãªã·ã¹ãã ã管çããå Žåãæåè£ãªå®è£ ã«ã¯æ éãªèšç»ãšãã¹ããã©ã¯ãã£ã¹ã®éµå®ãå¿ èŠã§ãã
äŸåé¢ä¿ç®¡çïŒãã§ãã¬ãŒã·ã§ã³ã®æ ž
- æŠç¥çãªå ±æïŒ ã©ã®äŸåé¢ä¿ãå ±æãããæ éã«æ€èšããŠãã ãããéå°ãªå ±æã¯ãæ£ããèšå®ãããªããšåæãã³ãã«ã倧ãããªãå¯èœæ§ããããå ±æãäžååã ãšããŠã³ããŒããéè€ããå¯èœæ§ããããŸããReactãAngularãVueãReduxãªã©ã®å€§èŠæš¡ã§å ±éã®ã©ã€ãã©ãªããäžå€®ã®UIã³ã³ããŒãã³ãã©ã€ãã©ãªã®å ±æãåªå ããŠãã ããã
-
ã·ã³ã°ã«ãã³äŸåé¢ä¿ïŒ ReactãReact DOMããŸãã¯ç¶æ
管çã©ã€ãã©ãªïŒäŸïŒReduxãVuexãNgRxïŒãªã©ã®éèŠãªã©ã€ãã©ãªã¯ãåžžã«ã·ã³ã°ã«ãã³ïŒ
singleton: trueïŒãšããŠèšå®ããŠãã ãããããã«ãããã¢ããªã±ãŒã·ã§ã³å ã«ã€ã³ã¹ã¿ã³ã¹ã1ã€ããååšããªãããšãä¿èšŒããã埮åŠãªãã°ãããã©ãŒãã³ã¹ã®åé¡ãé²ããŸãã -
ããŒãžã§ã³ã®äºææ§ïŒ
requiredVersionãšstrictVersionãè³¢ã䜿çšããŠãã ãããéçºç°å¢ã§æå€§éã®æè»æ§ãåŸãããã«ã¯ãç·©ãããªrequiredVersionã蚱容ããããããããŸãããæ¬çªç°å¢ãç¹ã«éèŠãªå ±æã©ã€ãã©ãªã«ã€ããŠã¯ãstrictVersion: trueãããé«ãå®å®æ§ãæäŸããããŒãžã§ã³ã®äžäžèŽã«ããäºæãã¬åäœãé²ããŸãã
ãšã©ãŒãã³ããªã³ã°ãšå埩å
-
å
ç¢ãªãã©ãŒã«ããã¯ïŒ ãããã¯ãŒã¯ã®åé¡ããããã€ã®ãšã©ãŒããŸãã¯äžæ£ãªèšå®ã«ããããªã¢ãŒãã¢ãžã¥ãŒã«ã®èªã¿èŸŒã¿ã«å€±æããå¯èœæ§ããããŸããåžžã«ãã©ãŒã«ããã¯UIïŒäŸïŒã«ã¹ã¿ã ã®èªã¿èŸŒã¿ã€ã³ãžã±ãŒã¿ããšã©ãŒããŠã³ããªãæã€
React.Suspenseã䜿çšïŒãå®è£ ãã空çœã®ç»é¢ã§ã¯ãªããåªé ãªæ©èœäœäžäœéšãæäŸããŠãã ããã - ç£èŠãšãã®ã³ã°ïŒ ãã¹ãŠã®ãã§ãã¬ãŒã·ã§ã³ãããã¢ããªã±ãŒã·ã§ã³ã«ããã£ãŠå æ¬çãªç£èŠãšãã®ã³ã°ãå®è£ ããŠãã ãããäžå€®éæš©çãªãšã©ãŒãã©ããã³ã°ãšããã©ãŒãã³ã¹ç£èŠããŒã«ã¯ãåé¡ã®çºçæºã«é¢ãããã忣ç°å¢ã§ã®åé¡ãè¿ éã«ç¹å®ããããã«äžå¯æ¬ ã§ãã
- é²åŸ¡çããã°ã©ãã³ã°ïŒ ãªã¢ãŒãã¢ãžã¥ãŒã«ãå€éšãµãŒãã¹ãšããŠæ±ã£ãŠãã ããããããã®éã§æž¡ãããããŒã¿ãæ€èšŒããäºæããªãå ¥åãåŠçããä»»æã®ãªã¢ãŒãã³ãŒã«ã倱æããå¯èœæ§ããããšæ³å®ããŠãã ããã
ããŒãžã§ãã³ã°ãšäºææ§
- ã»ãã³ãã£ãã¯ããŒãžã§ãã³ã°ïŒ å ¬éãããã¢ãžã¥ãŒã«ãšãªã¢ãŒãã¢ããªã±ãŒã·ã§ã³ã«ã»ãã³ãã£ãã¯ããŒãžã§ãã³ã°ïŒã¡ãžã£ãŒ.ãã€ããŒ.ãããïŒãé©çšããŠãã ãããããã«ãããå©çšè ã«å¯ŸããŠæç¢ºãªå¥çŽãæäŸããç Žå£ç倿Žã®ç®¡çã«åœ¹ç«ã¡ãŸãã
- åŸæ¹äºææ§ïŒ å ¬éãããã¢ãžã¥ãŒã«ãæŽæ°ããéã¯ãåŸæ¹äºææ§ãç®æããŠãã ãããç Žå£ç倿Žãé¿ããããªãå Žåã¯ããããæç¢ºã«äŒããç§»è¡ãã¹ãæäŸããŠãã ãããç§»è¡æéäžã¯äžæçã«ã¢ãžã¥ãŒã«ã®è€æ°ããŒãžã§ã³ãå ¬éããããšãæ€èšããŠãã ããã
- å¶åŸ¡ãããããŒã«ã¢ãŠãïŒ ãªã¢ãŒãã¢ããªã±ãŒã·ã§ã³ã®æ°ããŒãžã§ã³ã«å¯ŸããŠãå¶åŸ¡ãããããŒã«ã¢ãŠãæŠç¥ïŒäŸïŒã«ããªã¢ãããã€ããã£ãŒãã£ãŒãã©ã°ïŒãå®è£ ããŠãã ãããããã«ãããå šäžçãžã®ãªãªãŒã¹åã«å°æ°ã®ãŠãŒã¶ãŒã§æ°ããŒãžã§ã³ããã¹ãã§ããåé¡ãçºçããå Žåã®åœ±é¿ãæå°éã«æããããšãã§ããŸãã
ããã©ãŒãã³ã¹æé©å
- ãªã¢ãŒãã®é å»¶èªã¿èŸŒã¿ïŒ åæããŒãžã®ã¬ã³ããªã³ã°ã«çµ¶å¯Ÿäžå¯æ¬ ã§ãªãéããåžžã«ãªã¢ãŒãã¢ãžã¥ãŒã«ãé å»¶èªã¿èŸŒã¿ããŠãã ãããããã«ãããåæãã³ãã«ãµã€ãºãå€§å¹ ã«åæžãããäœæããã©ãŒãã³ã¹ãåäžããŸãã
-
ç©æ¥µçãªãã£ãã·ã³ã°ïŒ
remoteEntry.jsãã¡ã€ã«ãšå ¬éãããã¢ãžã¥ãŒã«ã«å¯ŸããŠããã©ãŠã¶ãã£ãã·ã³ã°ãšCDNïŒã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒãã£ãã·ã³ã°ã广çã«æŽ»çšããŠãã ãããæŠç¥çãªãã£ãã·ã¥ãã¹ãã£ã³ã°ã¯ããŠãŒã¶ãŒãå¿ èŠãªãšãã«åžžã«ææ°ã®ã³ãŒããååŸã§ããããã«ããåæã«å€æ§ãªå°ççãã±ãŒã·ã§ã³ã§å€æŽãããŠããªãã¢ãžã¥ãŒã«ã®ãã£ãã·ã¥ããããæå€§åããŸãã - ããªããŒããšããªãã§ããïŒ è¿ããã¡ã«ã¢ã¯ã»ã¹ãããå¯èœæ§ãé«ãã¢ãžã¥ãŒã«ã«ã€ããŠã¯ãããªããŒãïŒå³æãã§ãããããå®è¡ã¯ããªãïŒãŸãã¯ããªãã§ããïŒãã©ãŠã¶ã®ã¢ã€ãã«æéã«ãã§ããããïŒãæ€èšããåæã®éèŠãªã¬ã³ããŒãã¹ã«åœ±é¿ãäžããããšãªãäœæèªã¿èŸŒã¿æéãããã«æé©åããŠãã ããã
ã»ãã¥ãªãã£ã«é¢ããèæ ®äºé
-
ä¿¡é Œã§ãããªãªãžã³ïŒ ä¿¡é Œããæ€èšŒããããªãªãžã³ããã®ã¿ãªã¢ãŒãã¢ãžã¥ãŒã«ãèªã¿èŸŒãã§ãã ãããæªæã®ããã³ãŒãã®æ³šå
¥ãé²ãããã
remoteEntry.jsãã¡ã€ã«ãã©ãã§ãã¹ããããã©ãããã¢ã¯ã»ã¹ãããããæ éã«ç®¡çããŠãã ããã - ã³ã³ãã³ãã»ãã¥ãªãã£ããªã·ãŒïŒCSPïŒïŒ åçã«èªã¿èŸŒãŸããã³ã³ãã³ãã«é¢é£ãããªã¹ã¯ã軜æžãããããå ç¢ãªCSPãå®è£ ããã¹ã¯ãªããããã®ä»ã®ãªãœãŒã¹ãèªã¿èŸŒãŸãããœãŒã¹ãå¶éããŠãã ããã
- ã³ãŒãã¬ãã¥ãŒãšã¹ãã£ã³ïŒ ä»ã®éèŠãªã¢ããªã±ãŒã·ã§ã³ã³ã³ããŒãã³ããšåæ§ã«ããã¹ãŠã®ãã€ã¯ãããã³ããšã³ãã«å¯ŸããŠå³æ Œãªã³ãŒãã¬ãã¥ãŒããã»ã¹ãç¶æããèªååãããã»ãã¥ãªãã£ã¹ãã£ã³ããŒã«ãçµ±åããŠãã ããã
éçºè ãšã¯ã¹ããªãšã³ã¹ïŒDXïŒ
- äžè²«ããéçºç°å¢ïŒ å Žæã«é¢ãããããã¹ãŠã®ããŒã ã§äžè²«ããããŒã«ã«éçºç°å¢ã確ä¿ããããã«ãæç¢ºãªã¬ã€ãã©ã€ã³ãšãå Žåã«ãã£ãŠã¯æšæºåãããããŒãªã³ã°ãDockerã»ããã¢ãããæäŸããŠãã ããã
- æç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³ãããã³ã«ïŒ çžäºäŸåãããã€ã¯ãããã³ããšã³ããéçºããããŒã ã®ããã«ãæç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³ãã£ãã«ãšãããã³ã«ã確ç«ããŠãã ããã宿çãªåæãå ±æããã¥ã¡ã³ããAPIå¥çŽãäžå¯æ¬ ã§ãã
- ããŒãªã³ã°ãšããã¥ã¡ã³ããŒã·ã§ã³ïŒ ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®ã»ããã¢ããã«é¢ããããã¥ã¡ã³ããŒã·ã§ã³ã«æè³ããè€æ°ã®ãã§ãã¬ãŒã·ã§ã³ã¢ããªã±ãŒã·ã§ã³ãããŒã«ã«ã§èµ·åãããªã©ã®äžè¬çãªã¿ã¹ã¯ãç°¡çŽ åããããã®ã«ã¹ã¿ã ããŒãªã³ã°ãã¹ã¯ãªãããæ§ç¯ããããšãæ€èšããŠãã ããã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã«ãããã€ã¯ãããã³ããšã³ãã®æªæ¥
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãäžçäžã®æ°å€ãã®å€§èŠæš¡ã¢ããªã±ãŒã·ã§ã³ã§ãã§ã«ãã®äŸ¡å€ã蚌æããŠããŸããããã®æ ã¯ãŸã çµãããŸãããããã€ãã®éèŠãªçºå±ãæåŸ ã§ããŸãïŒ
- Webpackãè¶ ããæ¡å€§ïŒ Webpackã®ãã€ãã£ãæ©èœã§ãããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®äžæ žæŠå¿µã¯ãRspackãViteãã©ã°ã€ã³ã®ãããªä»ã®ãã«ãããŒã«ã«ãã£ãŠãæ¢æ±ãããæ¡çšãããŠããŸããããã¯ããã®åã®åºç¯ãªæ¥çèªèãšãããæ®éçãªã¢ãžã¥ãŒã«å ±ææšæºãžã®åãã瀺ããŠããŸãã
- æšæºåã®åãçµã¿ïŒ ãã®ãã¿ãŒã³ã浞éããã«ã€ããŠãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®èšå®ãšãã¹ããã©ã¯ãã£ã¹ãæšæºåããããã®ã³ãã¥ããã£äž»å°ã®åãçµã¿ãããã«é²ãã§ããããããã«ããã倿§ãªããŒã ããã¯ãããžãŒãããã«å®¹æã«çžäºéçšã§ããããã«ãªããŸãã
- 匷åãããããŒãªã³ã°ãšãšã³ã·ã¹ãã ïŒ ãã§ãã¬ãŒã·ã§ã³ã¢ããªã±ãŒã·ã§ã³ããµããŒãããããã«ç¹å¥ã«èšèšããããããè±ããªéçºããŒã«ããããã°æ¯æŽããããã€ã¡ã³ããã©ãããã©ãŒã ã®ãšã³ã·ã¹ãã ãæåŸ ãããã°ããŒãã«ã«åæ£ããããŒã ã®éçºè ãšã¯ã¹ããªãšã³ã¹ãå¹çåããŸãã
- æ¡çšã®å¢å ïŒ ãã®å©ç¹ãããåºãçè§£ãããã«ã€ããŠãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯å€§èŠæš¡ãªãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã§ããã«å€§ããªæ¡çšãèŠèŸŒãŸããäŒæ¥ããŠã§ããã¬ãŒã³ã¹ãšããžã¿ã«è£œåã«ã¢ãããŒãããæ¹æ³ãå€é©ããŠããã§ãããã
çµè«
Webpack 6ïŒããã³Webpack 5ããã®ãã®åºç€çãªèœåïŒã«ããJavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãããã³ããšã³ãéçºã®äžçã«ãããèšå¿µç¢çãªåé²ã衚ããŠããŸããããã¯ãç¹ã«ã°ããŒãã«ãªéçºããŒã ãæ±ããç¬ç«ããã¹ã±ãŒã©ãã«ã§ãå埩åã®ããã¢ããªã±ãŒã·ã§ã³ãå¿ èŠãšããçµç¹ã«ãšã£ãŠãå€§èŠæš¡ãªãã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ã®æ§ç¯ãšç¶æã«é¢é£ããæãæ ¹åŒ·ã課é¡ã®ããã€ãããšã¬ã¬ã³ãã«è§£æ±ºããŸãã
ã¢ãžã¥ãŒã«ã®åçãªå®è¡æå ±æãšã€ã³ããªãžã§ã³ããªäŸåé¢ä¿ç®¡çãå¯èœã«ããããšã§ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯éçºããŒã ãçã«èªåŸçã«äœæ¥ããæ©èœæäŸãå éããã¢ããªã±ãŒã·ã§ã³ããã©ãŒãã³ã¹ãåäžãããæè¡ç倿§æ§ãåãå ¥ããããšãå¯èœã«ããŸããããã¯ãè€éã§å¯çµåããã·ã¹ãã ããåäŸã®ãªãä¿ææ§ã§é©å¿ãé²åã§ãããæè»ã§æ§æå¯èœãªãšã³ã·ã¹ãã ãžãšå€è²ãããŸãã
ãŠã§ãã¢ããªã±ãŒã·ã§ã³ãå°æ¥ã«ããã£ãŠä¿èšŒããåœéçãªããŒã éã®ã³ã©ãã¬ãŒã·ã§ã³ãæé©åããäžçäžã§æ¯é¡ã®ãªããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšããããããäŒæ¥ã«ãšã£ãŠãJavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãåãå ¥ããããšã¯åãªãéžæè¢ã§ã¯ãªããæŠç¥çãªå¿ é äºé ã§ããé£ã³èŸŒã¿ãå®éšããããªãã®çµç¹ã®ããã«æ¬¡äžä»£ã®ãŠã§ãéçºãè§£ãæŸã¡ãŸãããã