모듈 연합에서 유형을 구현하는 방법(Poly repo)

Webpack Module Federation을 사용하여 Typscript 마이크로 프런트엔드 프로젝트를 빌드할 때 유형 문제가 있을 수 있습니다(원격에서 패키지를 가져올 때 유형 지원 없음). 그러나 프로젝트의 git 저장소 유형에 따라 다릅니다.

모노 레포라면 ... 문제 없습니다. 다른 패키지에서 유형을 가져오십시오(동일한 레포에서!).

폴리 저장소라면 ... 원격에서 유형을 가져와야 할 수도 있지만 어떻게 해야 할까요?

사용@module-federation/typescript

프로젝트 준비

# setup pnpm project 
mkdir remote-typesafe && cd remote-typesafe/
pnpm init -y

# setup workspace
cat >> package-workspace.yml << 'END'
packages:
  - host 
  - remote
END

# create host
npx create-mf-app
# name: host
# type: Application
# port: 8080
# framework: react 
# language: typescript 

# create remote
npx create-mf-app
# name: remote
# type: Application
# port: 8080
# framework: react 
# language: typescript 

# install packages 
pnpm i 

# then, we will have folder structure like these
# |- /remote-typesafe
# |  |- host/
# |  |- remote/

설치

호스트 앱과 원격 앱을 모두 설치해야 합니다@module-federation/typescript.

# when I'm writing this blog 0.2.2 is the most stable version
pnpm i -D @module-federation/[email protected]

구성

호스트 앱과 원격 앱 모두에 플러그인 추가

const FederatedTypesPlugin = require('@module-federation/typescript')

module.exports = {
  // ...weboack config 
  plugins: [
    new ModuleFederationPlugin(), // module federation main config 
    new FederatedTypePlugin(), // remote typesafe plugin
  ]
}

개발 흐름

먼저 원격 앱을 게시해야 합니다.

여기에 간단한src/Button.tsx 구성 요소를 추가하고 노출합니다.

export interface ButtonProps {
  title: string
  onClick?: () => void
}

const Button = (props: ButtonProps) => {
  const onClick = () => props?.onClick && props?.onClick()
  return <button onClick={onClick}>{props.title}</button>
}

export default Button

그런 다음 빌드하십시오!

pnpm build

dist/를 저장하는 remoteEntry.js와 우리의 유형을 dist/@mf-typescript로 저장하는 Button.d.ts를 갖게 됩니다.

그런 다음 봉사하십시오!

pnpm build:start # it's just enter dist and serve this folder 

이제 호스트 앱으로 이동합니다.

먼저 Webpack devServer를 시작해야 합니다(개발할 예정이기 때문입니다!).

pnpm start:live

Webpack은 루트 프로젝트에서 생성@mf-typescript합니다.

유형을 가져와서 사용하기만 하면 됩니다! 이것들처럼

import { ButtonProps } from '../@mf-typesript/remote/Button'

const Button = React.lazy(() => import('remote/Button')) 
  as unknown 
  as React.FC<ButtonProps>

이제 Button에는 유형이 있으며 유효하지 않은 유형을 사용할 때 경고가 표시됩니다.