저는 여러 개의 마이크로 프런트엔드 반응 애플리케이션을 가지고 있습니다. 모든 애플리케이션은 기술에 구애받지 않습니다. 즉, 모든 애플리케이션은 모든 라이브러리를 종속성으로 가질 수 있습니다. 그들은 webpack 모듈 통합 플러그인을 사용하고 있습니다. 다른 마이크로 프런트엔드 애플리케이션의 버전이 동일한 경우 종속성은 공유됩니다.
마이크로 프런트엔드 애플리케이션은 주요 마이크로 프런트엔드 애플리케이션과 하위 마이크로 프런트엔드 애플리케이션이라는 여러 그룹으로 나뉩니다. 기본 애플리케이션은 다른 하위 애플리케이션을 위한 컨테이너입니다. 한 번에 하나의 하위 응용 프로그램만 실행할 수 있습니다.
우리 회사에는 반응 구성 요소가 포함된 UI-Kit이 있습니다. 라이브러리에는 CSS 변수, 전역 선택기(* {/* CSS 규칙 */})가 포함되어 있습니다.
하위 애플리케이션은 UI-Kit을 종속성으로 가질 수 있습니다. UI-Kit 버전이 다른 경우 하위 애플리케이션 중 하나가 잘못된 스타일을 적용할 수 있습니다. 작업 흐름(작동 방식): 브라우저에서 기본 앱을 열면 webpack이 기본 앱의 첫 번째 페이지에 대한 모든 리소스(JS, CSS, 글꼴)를 로드합니다. 그런 다음 Sub app 1을 사용하여 페이지를 열고 webpack이 Sub app 1의 리소스를 로드하여 문서에 삽입합니다(CSS 스타일은 문서의 헤드에 삽입됩니다). 우리 UI-kit에는 CSS 모듈이 있지만 클래스 이름이 CSS 규칙의 내용을 기반으로 생성되지 않기 때문에 이것만으로는 충분하지 않습니다. 또한 CSS 변수는 버전 중 하나에서 변경될 수 있습니다. 또한 하위 애플리케이션은 UI-Kit을 사용하지 않을 수 있지만 UI-Kit의 모든 * CSS 규칙은 하위 애플리케이션에 적용됩니다. 또한 두 개의 하위 애플리케이션은 동일한 라이브러리의 서로 다른 버전을 사용할 수 있으며 라이브러리는 전역 또는 모듈 CSS를 사용할 수 있습니다.
각 마이크로 프런트엔드 애플리케이션에 대해 전체 CSS 격리를 적용해야 합니다.
지난번에는 완전한 CSS 격리를 지원하는 Shadow DOM을 적용해 보았습니다. 그러나 라이브러리 중 하나(cytoscapejs 또는 해당 플러그인)는 document.getElementById 메서드를 호출합니다. 찾고 있는 요소가 이미 섀도우 루트에 있기 때문에 null을 반환합니다. 나는 그 사건을 조사하고 있다.
이전에는 UI-Kit의 CSS 모듈 클래스 마지막에 버전을 추가하는 것을 고려했습니다. 그러나 CSS 변수의 이름을 고유하게 만들지는 않습니다. 또한 마이크로 프런트엔드 앱 빌드 내에서 외부 라이브러리의 CSS 클래스 이름을 바꿀 수 없다고 생각합니다.
또한 스타일 로더에서는 "use" 및 "unuse" 메소드를 사용하여 스타일 태그를 추가하고 제거할 수 있다는 것을 알고 있습니다. 이를 사용하여 두 하위 응용 프로그램의 스타일을 덮어쓰는 것을 방지할 수 있습니다. 하지만 mini-css-extract-plugin에는 이 기능이 없습니다.
:has 및 :not 선택기를 사용해 볼 수 있지만 다양한 CSS 상황(* 선택기, CSS 변수 등)을 다루고 싶지 않습니다. 나는 이것이 잘못된 접근 방식이라고 생각합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS 접두사 스타일에 선택기를 추가하여 CSS가 한 마이크로 프런트엔드에서 다른 마이크로 프런트엔드로 유출되는 것을 방지하는 PostCss Prefix Wrap 플러그인을 확인하세요.
플러그인을 사용하려면 플러그인을 설치하고 다음과 같이 webpack.config를 확장하세요.
으아아아#mfe_id_ 이름을 준수하고 MFE의 최상위 요소에 동일한 ID를 추가하세요.
장점
단점