Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
五倍學院 前端模組解放運動 高見龍
Slide 2
Slide 2 text
五倍學院 前端模組解放運動 高見龍
Slide 3
Slide 3 text
五倍學院 https://5xcamp.us/gdg2023
Slide 4
Slide 4 text
五倍學院 愛玩、愛現，喜歡冷門的玩具 網站開發者、講師、作家 技術推廣、企業訓練、技術諮詢 部落格：kaochenlong.com 高見龍 @eddiekao
Slide 5
Slide 5 text
五倍學院 第32刷 發售中 發售中 發售中
Slide 6
Slide 6 text
五倍學院 高見龍 高見龍
Slide 7
Slide 7 text
五倍學院 前端模組解放運動
Slide 8
Slide 8 text
五倍學院 前端工程師
Slide 9
Slide 9 text
五倍學院 模組化
Slide 10
Slide 10 text
五倍學院 ESM ECMAScript Modules 2015 年
Slide 11
Slide 11 text
五倍學院 投影片下載：https://5xcamp.us/mwc2023
Slide 12
Slide 12 text
五倍學院 瀏覽器原生支援 ESM ECMAScript Modules
Slide 13
Slide 13 text
五倍學院 資料來源：https://5xcamp.us/7DQvpv
Slide 14
Slide 14 text
五倍學院
Slide 15
Slide 15 text
五倍學院 </ script>
Slide 16
Slide 16 text
五倍學院 GDG DevFest Taipei 2023 title> import has from "lodash-es/has.js" </ script> </ head> <body> </ body> </ html>
Slide 17
Slide 17 text
五倍學院
Slide 18
Slide 18 text
五倍學院 GDG DevFest Taipei 2023 title> import has from "./node_modules/lodash-es/has.js" </ script> </ head> <body> </ body> </ html> 👌
Slide 19
Slide 19 text
五倍學院 打包工具
Slide 20
Slide 20 text
五倍學院 npm install, yarn add
Slide 21
Slide 21 text
五倍學院 https: // 5xcamp.us/mwc-vite
Slide 22
Slide 22 text
五倍學院 node_modules/
Slide 23
Slide 23 text
五倍學院
Slide 24
Slide 24 text
五倍學院
Slide 25
Slide 25 text
五倍學院 pnpm
Slide 26
Slide 26 text
五倍學院 但，可以不打包嗎？
Slide 27
Slide 27 text
五倍學院 importmap 2017 年
Slide 28
Slide 28 text
五倍學院 Live Demo!!
Slide 29
Slide 29 text
五倍學院 importmap
Slide 30
Slide 30 text
五倍學院 importmap = import + map
Slide 31
Slide 31 text
五倍學院 </ script>
Slide 32
Slide 32 text
五倍學院 直接拿 CDN 來用
Slide 33
Slide 33 text
五倍學院 GDG DevFest Taipei 2023 title> { "imports": { "dayjs": "https: // ga.jspm.io/npm:dayjs@1.11.7/dayjs.min.js" } } < / script> <script type="module"> import day from "dayjs" < / script> </ head> <body> < / body> < / html>
Slide 34
Slide 34 text
五倍學院 瀏覽器支援程度？
Slide 35
Slide 35 text
五倍學院 Chrome, Firefox OK, but...
Slide 36
Slide 36 text
五倍學院 es-module-shims
Slide 37
Slide 37 text
五倍學院 時代在進步
Slide 38
Slide 38 text
五倍學院 資料來源：https://5xcamp.us/safari-16-4 支援
Slide 39
Slide 39 text
五倍學院 資料來源：https://5xcamp.us/dc9unb
Slide 40
Slide 40 text
五倍學院
Slide 41
Slide 41 text
五倍學院 優點？
Slide 42
Slide 42 text
五倍學院 免安裝、免打包
Slide 43
Slide 43 text
五倍學院 no build
Slide 44
Slide 44 text
五倍學院 不會有一大包的 node_modules
Slide 45
Slide 45 text
五倍學院 需要才載入
Slide 46
Slide 46 text
五倍學院 缺點？
Slide 47
Slide 47 text
五倍學院 FAQ
Slide 48
Slide 48 text
五倍學院 importmap 有誰在用？
Slide 49
Slide 49 text
五倍學院 Tree Shaking?
Slide 50
Slide 50 text
五倍學院 對 CDN 發出一堆 request 的效能好嗎？
Slide 51
Slide 51 text
五倍學院 CDN 掛了怎麼辦？
Slide 52
Slide 52 text
五倍學院 工商服務 實體、線上課程、企業內訓 有時間 來實體 沒時間 買線上
Slide 53
Slide 53 text
五倍學院 工商服務 Node / Python / Django / Rust 課程 有時間 來實體 沒時間 買線上
Slide 54
Slide 54 text
五倍學院
Slide 55
Slide 55 text
五倍學院 愛玩、愛現，喜歡冷門的玩具 網站開發者、講師、作家 技術推廣、企業訓練、技術諮詢 部落格：kaochenlong.com 高見龍 @eddiekao