단일한 수욕 방식을 통해 미형 전단이 가져오는 즐거움을 누리다💡

🏃‍♂️
여러분께 상하문을 제공하기 위해 본고는 제가 vanilla js 용기 응용 프로그램에서 여러 개의 전방 응용 프로그램을 실행하는 실험을 바탕으로 합니다.

마이크로 프런트엔드 애플리케이션이란 무엇입니까?

이 응용 프로그램은 single-spa 프레임워크를 바탕으로 같은 노선에서 여러 개의 전방 응용 프로그램을 실행할 수 있습니다.마이크로 프런트엔드 애플리케이션과 관련된 고려 사항

마이크로프런트엔드 어플리케이션을 독립적으로 배포합니다.

기존 응용 프로그램을 다시 작성하지 않고 새 프레임워크를 사용하여 새 응용 프로그램을 만들 수 있습니다.

코드 라이브러리의 로드를 지연시켜 성능을 향상시킵니다.

예비 지식

모든 JavaScript 프레임워크에 대한 지식

JavaScript

single-spa 컴퓨터에 전역적으로 설치해야 합니다

.

애플리케이션 구축

single-spa 프레임워크를 사용하여 다음 세 가지 애플리케이션을 만듭니다. -

루트 구성

반응 어플리케이션

각도 적용

우리는 노선에 따라react와angular 프로그램을 보여 줄 것입니다.
그래서 만약에 노선이...

/react 다음에 react 프로그램이 불러옵니다

/angular 다음에angular 프로그램이 불러옵니다

첫 번째 단계:

세 응용 프로그램을 함께 배치할 폴더를 만듭니다.
폴더의 루트 디렉토리로 이동하여 다음 명령을 실행하고 그림에 표시된 지침을 따릅니다.

$ npx create-single-spa

루트 구성 설정은 나중에 완료됩니다.

2단계:

현재 우리는 단일 스파를 사용하여react 프로그램을 만들 것입니다.따라서 다음 명령을 동일한 폴더에서 실행하고 그림에 설명된 대로 수행합니다.

$ npx create-single-spa

3단계:

현재, 우리는 단일 스파를 사용하여 각도 프로그램을 만들 것입니다.따라서 다음 명령을 동일한 폴더에서 실행하고 그림에 설명된 대로 수행합니다.

$ npx create-single-spa

angular 응용 프로그램에 대해 다른 프로토콜이 거의 없습니다😀

angular 프로젝트에 몇 개의 의존항을 따로 설치해야 합니다

$ npm i -D @angular-builders/custom-webpack single-spa

4단계:

이제 새로 만든 프로젝트의 파일에 작은 조정을 추가합니다: -

루트 구성

색인에서 가져오기를 업데이트합니다.ejs

 {
  "imports": {
    "@orgname/root-config": "//localhost:9000/orgname-root-config.js",
    "@orgname/react-app": "//localhost:8080/orgname-react-app.js",
    "angular-app": "//localhost:4200/main.js"
  }
}

orgname root config라는 구성 파일을 업데이트합니다.ts

색인에 내비게이션 표시줄을 추가합니다.체내

<style>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111D4A;
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
}

.navbar ul {
  display: flex;
  align-items: center;
  list-style-type: none;
  height: 100%;
}

.navbar li {
  padding-right: 24px;
  height: 100%;
}

.navbar li:hover {
  opacity: 0.8;
}

.navbar a {
  text-decoration: none;
  color: white;
}
</style>
<div class="navbar">
<ul>
  <a onclick="singleSpaNavigate('/react')">
    <li>
      React
    </li>
  </a>
  <a onclick="singleSpaNavigate('/angular')">
    <li>
      Angular
    </li>
  </a>
</ul>
</div>

반응 응용

루트 디렉토리를 업데이트합니다.구성 요소tsx는 다음과 같다

angular 응용 프로그램

zonejs를 의존항으로main을 가져옵니다.독수요법.ts

{provide: APP BASE HREF,useValue:'/angular'} 응용 프로그램의providers 그룹에 추가합니다.모듈ts 및 @angular/common 모듈에서 APP BASE HREF 가져오기

5단계:

어플리케이션 실행

루트 구성

$ npm start

루트 구성 애플리케이션은 http://localhost:9000에서 실행됩니다.

react 애플리케이션

$ npm start

react 응용 프로그램이 http://locahost:8080에서 실행됩니다.

각도 적용

npm run serve:single-spa:angular-app

애플리케이션 915에서 실행
지금 네비게이션http://localhost:4200이 도착했을 때 보실 수 있을 거예요.
http://localhost:9000
React를 클릭하면

Angular를 클릭하면

When the route changes the new application mounts and the previously loaded application unmounts.

다양한 애플리케이션의 GitHub 저장소

root-config

react-app

angular-app

반응수 요법 응용 단일 수욕 센터의 자원을 따라잡다

싱글 워터 클리닉에서의 경험을 꼭 알려주고 새로운 것을 계속 배워서 마음껏 즐겨라!!!
📖
.ltag__user__id__11606.작업 따르기 버튼
35000000 배경색!중요
색상: #00ffff!중요
테두리 색상: #000000!중요
}
single-spa

뒤따르다

Nitin Reddy