모듈 페더레이션 Vite를 사용한 모노레포 및 마이크로 프런트엔드

✨ 소개 ✨:

모노레포

모노레포는 관련되어 있지만 독립적인 여러 프로젝트를 관리하는 단일 저장소입니다. 별도의 저장소에 비해 코드 재사용, 종속성 단순화, 더 나은 팀 협업 촉진을 통해 개발을 간소화합니다.

마이크로 프론트엔드

개별적으로 배포할 수 있는 더 작고 독립적인 단위로 분해되는 프런트엔드의 웹 애플리케이션 아키텍처입니다. 마이크로 프런트엔드는 다른 코드 베이스와 독립적으로 생성 및 배포할 수 있으므로 유연성과 확장성이 향상됩니다.

모듈 연합 및 VITE

모듈 연합: Webpack의 매우 강력한 기능으로 원격 위치에서 코드를 동적으로 로드할 수 있습니다.

Vite: 이는 최신 JavaScript 기능을 훌륭하게 지원하고 플러그인 시스템을 통해 해당 기능을 확장하여 빠른 개발 서버 시작과 즉각적인 핫 모듈 교체를 가능하게 하는 보다 현대적인 프런트엔드 빌드 도구입니다. .

이러한 도구로 해결할 수 있는 문제는 무엇입니까?:

• 팀 확장
• 종속성 관리
• 개발 속도 향상

이러한 패턴과 도구를 결합하면 최신 웹 개발 요구 사항을 충족하는 확장 가능하고 유지 관리가 가능한 고성능 프런트 엔드 애플리케이션을 구축할 수 있습니다.

Monorepos, Micro-Frontends, Module Federation 및 Vite ?? 결합:

영향

이러한 기술을 결합하면 대규모의 복잡한 웹 애플리케이션을 구축하기 위한 강력하고 유연한 아키텍처를 만들 수 있습니다. 주요 영향에 대한 분석은 다음과 같습니다.

• 향상된 확장성: 모노레포 내에서 마이크로 프런트엔드를 독립적으로 배포하고 업데이트합니다.
• 향상된 개발자 환경: Vite 및 간소화된 워크플로를 통해 개발 시간이 단축됩니다.
• 최적화된 성능: 모듈 연합을 통한 주문형 코드 로드는 초기 로드 시간을 단축합니다.
• 더 나은 유지 관리: 모듈식 마이크로 프런트엔드는 코드 구성을 개선하고 결합을 줄입니다.

?? 이 이론은 충분히 설명했으니 이제 몇 가지 동작을 살펴보겠습니다! ??

그것을 하는 방법?

1: 모노레포 설정

Lerna 또는 Nx와 같은 모노레포 관리 도구를 선택하세요. (이 데모 프로젝트에서는 Nx를 선택하겠습니다)

• 폴더를 생성하고 거기에 Nx 작업 공간을 초기화해 보겠습니다.

mkdir my-monorepo
cd my-monorepo

2: Nx Cli를 설치합니다.

• Nx CLI를 시스템에 전체적으로 설치합니다.

npm add --global nx@latest 

• Nx 작업공간 초기화

npx create-nx-workspace@latest

• Nx CLI를 사용하여 작업 공간 내에서 새 애플리케이션과 라이브러리를 생성하세요.

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3: Vite 구성 및 모듈 연합 구현:

• 각 마이크로 프런트엔드의 vite.config.js에 @originjs/vite-plugin-federation 플러그인을 설치하세요.

npm i @originjs/vite-plugin-federation -D

• vite.config.js(Nx에서 생성하지 않은 경우)를 생성하고 구성합니다.
• 모듈 연합 패키지를 구현합니다.

호스트 앱 Vite 구성:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

원격 앱 Vite 구성:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

프로젝트 구조는 다음과 같습니다

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

? 축하합니다. 이제 앱이 구성되었습니다. ?
이제 구성요소를 생성하여 호스트 앱에 노출해 보세요.

호스트에 원격 구성 요소를 추가하는 방법은 무엇입니까?

구성 요소를 "AppComponent"로 노출했고 원격 이름이 "remoteApp"이라고 가정해 보겠습니다.

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

*참고: * 호스트의 vite.config.js 파일에 원격 URL을 추가해야 합니다.

실제 시나리오 ??:

대규모 전자상거래 플랫폼: 동일한 팀이 제품 페이지, 결제 프로세스, 사용자 계정을 독립적으로 작업할 수 있습니다.
엔터프라이즈 애플리케이션: 기능은 공유 플랫폼 내에서 여러 부서에서 관리할 수 있습니다.
다양한 팀이 개별 위젯이나 대시보드를 만들고 유지 관리할 수 있습니다.

? 여기에서 내 데모 프로젝트 코드를 확인하세요 ??: Monorepo 프로젝트

결론

위의 모든 기술의 장점을 사용하는 Monorepos, Micro-frontends, Module Federation 및 Vite는 조직이 최신 개발 요구 사항 및 비즈니스 요구 사항을 충족하는 확장 가능하고 유지 관리가 가능한 고성능 웹 애플리케이션을 구축하는 데 도움이 될 수 있습니다.

추가 자료:

Nx 문서
VITE 문서
웹팩 모듈 연합
마이크로 프론트엔드 아키텍처

프로젝트에 이 설정을 구현하는 데 질문이 있거나 도움이 필요하면 언제든지 문의하세요. 놀라운 것을 만들어 봅시다! ?

위 내용은 모듈 페더레이션 Vite를 사용한 모노레포 및 마이크로 프런트엔드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!