Rumah > Artikel > hujung hadapan web > Sepadukan Komponen Web/MFE dengan HTML statik biasa
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 ?).
Menggunakan pustaka SystemJS, kami boleh menyepadukan komponen web atau MFE dengan lancar, malah mengimport sebarang modul pada masa jalan.
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
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>
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" />
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.
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!