快速理解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> ~~~