前端模組解放運動 - importmap

五倍學院前端模組解放運動高見龍

五倍學院 https://5xcamp.us/gdg2023

五倍學院愛玩、愛現，喜歡冷門的玩具網站開發者、講師、作家技術推廣、企業訓練、技術諮詢部落格：kaochenlong.com 高見龍 @eddiekao

五倍學院第32刷發售中發售中發售中

五倍學院高見龍高見龍

五倍學院前端模組解放運動

五倍學院前端工程師

五倍學院模組化

五倍學院 ESM ECMAScript Modules 2015 年

五倍學院投影片下載：https://5xcamp.us/mwc2023

五倍學院瀏覽器原生支援 ESM ECMAScript Modules

五倍學院資料來源：https://5xcamp.us/7DQvpv

五倍學院

五倍學院 <script type="module"> </ script>

五倍學院 <!DOCTYPE html> <html> <head> <title>GDG DevFest Taipei 2023 </
title> <script type="module"> import has from "lodash-es/has.js" </ script> </ head> <body> </ body> </ html>

五倍學院

title> <script type="module"> import has from "./node_modules/lodash-es/has.js" </ script> </ head> <body> </ body> </ html> 👌

五倍學院打包工具

五倍學院 npm install, yarn add

五倍學院 https: // 5xcamp.us/mwc-vite

五倍學院 node_modules/

五倍學院

五倍學院 pnpm

五倍學院但，可以不打包嗎？

五倍學院 importmap 2017 年

五倍學院 Live Demo!!

五倍學院 importmap

五倍學院 importmap = import + map

五倍學院 <script type="importmap"> </ script>

五倍學院直接拿 CDN 來用

title> <script type="importmap"> { "imports": { "dayjs": "https: // ga.jspm.io/npm:[email protected]/dayjs.min.js" } } < / script> <script type="module"> import day from "dayjs" < / script> </ head> <body> < / body> < / html>

五倍學院瀏覽器支援程度？

五倍學院 Chrome, Firefox OK, but...

五倍學院 es-module-shims

五倍學院時代在進步

五倍學院資料來源：https://5xcamp.us/safari-16-4 支援

五倍學院資料來源：https://5xcamp.us/dc9unb

五倍學院

五倍學院優點？

五倍學院免安裝、免打包

五倍學院 no build

五倍學院不會有一大包的 node_modules

五倍學院需要才載入

五倍學院缺點？

五倍學院 FAQ

五倍學院 importmap 有誰在用？

五倍學院 Tree Shaking?

五倍學院對 CDN 發出一堆 request 的效能好嗎？

五倍學院 CDN 掛了怎麼辦？

五倍學院工商服務實體、線上課程、企業內訓有時間來實體沒時間買線上

五倍學院工商服務 Node / Python / Django / Rust 課程
有時間來實體沒時間買線上

五倍學院

五倍學院愛玩、愛現，喜歡冷門的玩具網站開發者、講師、作家技術推廣、企業訓練、技術諮詢部落格：kaochenlong.com 高見龍 @eddiekao

前端模組解放運動 - importmap

前端模組解放運動 - importmap

More Decks by 高見龍

Other Decks in Programming

Featured

Transcript