일반 정적 HTML과 웹 구성 요소/MFE 통합-JS 튜토리얼-php.cn

일반 정적 HTML과 웹 구성 요소/MFE 통합

PHPz

풀어 주다： 2024-08-25 06:44:06

원래의

801명이 탐색했습니다.

Integrate Web Component/MFE with plain static HTML

소개

이상적인 세상에서는 현대화된 기술 스택이 기존 시스템과 통합되는 하이브리드 솔루션이 필요하지 않습니다. 그런데 우리는 정말 이상적인 세상에 살고 있는 걸까?! 저는 종종 하이브리드 접근 방식을 구현해야 한다는 사실을 깨달았습니다. 여러분 대부분은 MFE(마이크로 프런트엔드)와 모듈 연합이 얼마나 환상적인 솔루션인지 들어보셨을 것입니다. 하지만 동적 버전 업데이트에 대한 걱정 없이 일반 정적 HTML 페이지와 MFE를 통합하는 방법을 알고 계십니까? 즉, MFE가 변경될 때마다 소비자 HTML 페이지가 업데이트되는 것을 어떻게 방지할 수 있습니까? 여러분의 삶을 (더 나은 방향으로) 변화시킬 수 있는 몇 가지 간단한 코드 변경 사항을 안내해 드리겠습니다.

시작하기

SystemJS 라이브러리를 사용하면 웹 구성 요소나 MFE를 원활하게 통합할 수 있으며 런타임에 모든 모듈을 가져올 수도 있습니다.

1단계: 모듈을 맵으로 내보내기

먼저 Webpack과 같은 모듈 번들러를 사용하여 모듈을 JSON 형식의 맵으로 내보냅니다. webpack-import-map-plugin을 사용하면 가져오기 맵 파일을 쉽게 생성할 수 있습니다.

// with a Webpack 4 config like:
config.entry = { entryName: 'entry-file.js' };
config.output.filename = '[name].[contenthash:8].js';

// Add to plugins
new ImportMapWebpackPlugin({
    filter: x => {
        return ['entryName.js'].includes(x.name);
    },
    transformKeys: filename => {
        if (filename === 'entryName.js') {
            return 'mfe-module/out-file';
        }
    },
    fileName: 'import-map.json',
    baseUrl: 'https://super-cdn.com/'
});
// output import-map.json
{
    "imports": {
        "mfe-module": "https://super-cdn.com/entryName.12345678.js"
    }
}

로그인 후 복사

참고: 위의 코드 조각은 webpack-import-map-plugin 저장소에서 가져온 것입니다

2단계: SystemJS 로드

다음으로 SystemJS 파일을 일반 JavaScript 파일로 가져와 로드합니다. 자체 CDN에서 s.min.js의 파일 버전을 호스팅하거나 기존 호스팅을 사용할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>

로그인 후 복사

3단계: 지도 JSON 파일 가져오기

이제 모듈을 HTML 페이지에 통합할 수 있도록 지도 JSON 파일을 가져옵니다. 가져오기 맵을 사용하면 JS 파일 경로를 하드코딩할 필요가 없으므로 소비자 코드를 변경할 필요 없이 가져온 모듈을 업데이트할 수 있습니다.

<script type="systemjs-importmap" src="/path/to/module-importmap.json">

로그인 후 복사

참고: 다른 출처에서 로드하는 경우 crossorigin 속성을 사용하세요.

<script crossorigin type="systemjs-importmap" src="/path/to/import-map.json">

로그인 후 복사

맵 파일 가져오기 예시:

{
    "imports": {
        "mfe-module": "https://super-cdn.com/entryName.12345678.js"
    }
}

로그인 후 복사

4단계: 모듈 로드
이 시점에서 SystemJS가 로드되고 MFE/웹 구성 요소 모듈을 가져왔습니다. 이제 모듈을 로드할 시간입니다.

<script crossorigin>
    System.import('mfe-module');
</script>

로그인 후 복사

가져온 후에는 웹 구성 요소인지 아니면 부트스트랩된 일반 HTML 태그인지에 따라 해당 유형에 따라 모듈을 호출할 수 있습니다.

//web component
<mfe-module/>
//some regular HTML tag that is bootstrapped.
<div id="mfe-module" />

로그인 후 복사

결론

이러한 단계를 따르면 빈번한 업데이트나 버전 관리에 대한 걱정 없이 마이크로 프런트엔드 또는 웹 구성 요소를 기존 시스템에 원활하게 통합할 수 있습니다. SystemJS와 가져오기 맵을 사용하면 모듈을 동적으로 로드하고 관리할 수 있으므로 최소한의 노력으로 정적 HTML 페이지를 최신 상태로 유지할 수 있습니다. 이 접근 방식은 최신 마이크로 프런트엔드와 기존 시스템을 연결하는 확장 가능하고 효율적인 솔루션을 제공하여 아키텍처의 원활한 전환과 지속적인 유연성을 지원합니다.