Sepadukan Komponen Web/MFE dengan HTML statik biasa

pengenalan

Dalam dunia yang ideal, kami tidak sekali-kali memerlukan penyelesaian hibrid di mana susunan teknologi moden berintegrasi dengan sistem warisan. Tetapi adakah kita benar-benar hidup dalam dunia yang ideal?! Lebih kerap daripada tidak, saya mendapati diri saya perlu melaksanakan pendekatan hibrid. Saya pasti kebanyakan anda pernah mendengar tentang bahagian hadapan mikro (MFE) dan bagaimana persekutuan modul merupakan penyelesaian yang hebat. Tetapi adakah anda tahu cara mengintegrasikan MFE dengan halaman HTML statik biasa tanpa perlu risau tentang kemas kini versi dinamik? Dalam erti kata lain, bagaimana anda boleh mengelak daripada mengemas kini halaman HTML pengguna setiap kali MFE berubah? Saya akan membimbing anda melalui beberapa perubahan kod mudah yang mungkin mengubah hidup anda (ke arah yang lebih baik ?).

Bermula

Menggunakan pustaka SystemJS, kami boleh menyepadukan komponen web atau MFE dengan lancar, malah mengimport sebarang modul pada masa jalan.

Langkah 1: Eksport Modul Anda sebagai Peta

Pertama, menggunakan pengikat modul seperti Webpack, eksport modul sebagai peta dalam format JSON. Pemalam webpack-import-map-plugin memudahkan untuk menjana fail peta import.

// 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"
    }
}

Nota: Coretan kod di atas diperoleh daripada repositori webpack-import-map-plugin

Langkah 2: Muatkan SystemJS

Seterusnya, muatkan fail SystemJS dengan mengimportnya sebagai fail JavaScript biasa. Anda boleh mengehoskan versi fail daripada s.min.js pada CDN anda sendiri atau menggunakan dihoskan sedia ada.

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

Langkah 3: Import Fail JSON Peta

Sekarang, import fail JSON peta supaya modul anda boleh disepadukan ke dalam halaman HTML. Peta import menghapuskan keperluan untuk laluan fail JS pengekodan keras, membenarkan kemas kini pada modul anda yang diimport tanpa memerlukan perubahan kod pengguna.

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

Nota: Gunakan atribut crossorigin jika memuatkan dari asal yang berbeza.

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

Contoh fail peta import:

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

Langkah 4: Muatkan Modul Anda
Pada ketika ini, SystemJS dimuatkan dan ia telah mengimport modul komponen MFE/web. Kini, tiba masanya untuk memuatkan modul anda:

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

Setelah diimport, anda boleh menggunakan modul anda berdasarkan jenisnya—sama ada komponen web atau teg HTML biasa yang diikat but:

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

Kesimpulan

Dengan mengikut langkah ini, anda boleh menyepadukan bahagian hadapan mikro atau komponen web dengan lancar ke dalam sistem lama tanpa perlu risau tentang kemas kini yang kerap atau pengurusan versi. Menggunakan SystemJS dan peta import membolehkan anda memuatkan dan mengurus modul secara dinamik, memastikan halaman HTML statik anda sentiasa dikemas kini dengan usaha yang minimum. Pendekatan ini menyediakan penyelesaian berskala dan cekap untuk merapatkan bahagian hadapan mikro moden dengan sistem sedia ada, membolehkan peralihan yang lebih lancar dan fleksibiliti berterusan dalam seni bina anda.

Jika anda telah sampai di sini, maka saya telah melakukan usaha yang memuaskan untuk memastikan anda terus membaca. Sila berbaik hati untuk meninggalkan sebarang komen atau meminta sebarang pembetulan.

Blog Saya yang Lain:

• Cara Mengurangkan Masa Memuatkan Halaman - Bahagian 1
• Elakkan Pelaksanaan Lalai Spring RestTemplate untuk Mencegah Kesan Prestasi
• Pengalaman langsung saya dengan komponen web - pembelajaran dan batasan
• Rangka Kerja Keputusan Mikro-Frontend
• Uji Perkhidmatan Web SOAP menggunakan Alat Posmen

Atas ialah kandungan terperinci Sepadukan Komponen Web/MFE dengan HTML statik biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!