快速理解systemjs · 前端工程化學習筆記

>[success] # 快速理解systemjs >[danger] ##### 快速案例說明 ~~~ 1.systemjs 拆分成兩部分一部分就是我們理解導入文件即'systemjs-importmap' 這部分就是和我們使用es 導入一樣需要聲明對照關系 1.1.在es的寫法通常是這樣 'import 變量 from 位置' 直接使用變量 1.2.在'systemjs' 想要使用時候是 System.import(變量名')，當然這全是因為在'systemjs-importmap' 導入時候包其實都是'System.register(["注冊變量名"],function(){})' 因此形成關系 ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script> <script type="systemjs-importmap"> // import single-spa from 'https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js' { "imports": { "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" } } </script> <script> System.import('single-spa').then((res) => { console.log(res) }) </script> </head> <body></body> </html> ~~~