模組化前端開發：從亂七八糟到組織有序

Transcript

1. 五倍學院 從亂七八糟到組織有序
2. 五倍學院 愛玩、愛現，喜歡冷門的玩具 網站開發者、講師、作家 技術推廣、企業訓練、技術諮詢 部落格：kaochenlong.com 高見龍 @eddiekao
3. 五倍學院
4. 五倍學院 從亂七八糟到組織有序
5. 五倍學院
6. 五倍學院 前端？不就是寫網頁的嘛
7. 五倍學院 模組化？
8. 五倍學院 JavaScript = 玩具 1995 年
9. 五倍學院 你知道在最初版本的 JS 是沒有陣列的嗎？
10. 五倍學院 石器時代
11. 五倍學院 模組化？
12. 五倍學院 no module
13. 五倍學院 <script type="text/javascript"> $().ready(function () { console.log("MWC 2023"); }); </ script> $
14. 五倍學院 <script src="jquery.min.js"> < / script> <script type="text/javascript"> $().ready(function () { console.log("MWC 2023"); }); </ script>
15. 五倍學院 載入的順序很重要
16. 五倍學院 <script type="text/javascript"> $().ready(function () { console.log("MWC 2023"); }); </ script> <script src="jquery.min.js"> < / script>
17. 五倍學院 套件放在 <head> 裡， 自己寫的放 </body> 前
18. 五倍學院 污染全域變數
19. 五倍學院 使用 IIFE Immediately Invoked Function Expression
20. 五倍學院 const MyApp = MyApp || {} MyApp.UserModule = (function () { // 登入功能 function login(username, password) {} // 登出功能 function logout() {} return { login, logout } })() MyApp.UserModule.login("mwc", "2023") MyApp.UserModule.logout() 模組化！
21. 五倍學院 官方不做，社群做！
22. 五倍學院 戰國時代
23. 五倍學院 群魔亂舞 / 群雄割據 CommonJS, AMD/CMD, UMD...etc
24. 五倍學院 CommonJS
25. 五倍學院 // 我是 mwc_mod.js const MWC = function () { console.log("ModernWeb Conference") } module.exports.MWC = MWC
26. 五倍學院 // 我是 main.js const mod = require("./mwc_mod.js") console.log(mod) // { MWC: [Function: MWC] } mod.MWC() // 印出 ModernWeb Conference
27. 五倍學院 // 我是 mwc_mod.js const MWC = function () { console.log("ModernWeb Conference") } module.exports.MWC = MWC 這是什麼？
28. 五倍學院 console.log(module) // { // id: '.', // path: '/private/tmp/mwc-demo', // exports: { MWC: [Function: MWC] }, // filename: '/private/tmp/mwc-demo/m.js', // loaded: false, // children: [], // paths: [ // '/private/tmp/mwc-demo/node_modules', // '/private/tmp/node_modules', // '/private/node_modules', // '/node_modules' // ] // } 在這裡！
29. 五倍學院 console.log(module.exports === exports) // true
30. 五倍學院 const MWC = function () { console.log("ModernWeb Conference") } // module.exports.MWC = MWC exports.MWC = MWC 同樣效果
31. 五倍學院 // 我是 mwc_mod.js const MWC = function () { console.log("ModernWeb Conference") } exports.MWC = MWC exports = "謝謝你 9527" console.log(exports) // 印出 謝謝你 9527 console.log(module.exports) // { MWC: [Function: MWC] } 咦？
32. 五倍學院 同步載入
33. 五倍學院 AMD Asynchronous Module Definition
34. 五倍學院 非同步
35. 五倍學院 require.js
36. 五倍學院 // 我是 hello.js define(function () { const hello = function () { console.log("HELLO") } return { hello, } }) // 我是 world.js define(function () { const world = function () { console.log("WORLD") } return { world, } }) 模組 模組
37. 五倍學院 <!DOCTYPE html> <html> <head> <script src="require.js" data-main="main"> </ script> <title>MWC 2023 </ title> </ head> <body> </ body> </ html> 發動！
38. 五倍學院 // 我是 main.js require(["hello", "world"], function (h, w) { h.hello() w.world() }) 載入
39. 五倍學院 UMD Universal Module Definition
40. 五倍學院 (function (root, factory) { if (typeof define === "function" && define.amd) { // 是 AMD！ define(["deps"], factory) } else if (typeof exports === "object") { // 是 CommonJS！ module.exports = factory(require("deps")) } else { // 其它，來去全域變數上塞東 西 ！ root.MyModule = factory(root) } })(this, function (deps) { return { MWC: function () { console.log("ModernWeb Conference") }, year: "2023", } }) 檢查 檢查 IIFE
41. 五倍學院 jQuery
42. 五倍學院 https: // 5xcamp.us/jquery-source
43. 五倍學院 ESM? ES Module 2015 年
44. 五倍學院 工業革命時代
45. 五倍學院 Node = 蒸汽機
46. 五倍學院 轉譯、打包、建置工具！
47. 五倍學院 https: // webpack.js.org/
48. 五倍學院 支援多種模組系統 CommonJS, AMD, ESM...etc
49. 五倍學院 webpack.config.js 🤮
50. 五倍學院 https: // parceljs.org/
51. 五倍學院 esbuild
52. 五倍學院 天下武功，唯快不破
53. 五倍學院 https: // esbuild.github.io/
54. 五倍學院 為什麼這麼快？
55. 五倍學院 Go
56. 五倍學院 https: // bun.sh/
57. 五倍學院 Zig
58. 五倍學院 大內捲時代
59. 五倍學院 https: // rollupjs.org/
60. 五倍學院 Tree-Shaking 除屑優化
61. 五倍學院 // 我是 extra_fish.js const 工 具 人 = "🛠🔨🔧⛏" function 多餘() { console.log("不是多了塊 魚 🐟，是多餘，你呀，你根本就是多餘呀你") } function MWC(year) { return `ModernWeb Conference ${year}` } console.log(MWC(2023)) :)
62. 五倍學院
63. 五倍學院 現代
64. 五倍學院 瀏覽器原生支援 ESM！ import vue from 'react' 🙌
65. 五倍學院 https: // developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/import
66. 五倍學院 <script type="module"> </ script>
67. 五倍學院 <!DOCTYPE html> <html> <head> <title>MWC 2023 </ title> <script type="module"> import has from "lodash-es/has.js" </ script> </ head> <body> </ body> </ html>
68. 五倍學院
69. 五倍學院 <!DOCTYPE html> <html> <head> <title>MWC 2023 </ title> <script type="module"> import has from "./node_modules/lodash-es/has.js" </ script> </ head> <body> </ body> </ html> 👌
70. 五倍學院 <!DOCTYPE html> <html> <head> <title>MWC 2023 < / title> <script type="module"> import day from "./node_modules/dayjs/dayjs.min.js" </ script> < / head> <body> </ body> </ html>
71. 五倍學院
72. 五倍學院 Vite /vit/
73. 五倍學院 Vite 不是 Vue 的專武！
74. 五倍學院 Vite 不是打包工具
75. 五倍學院 esbuild ↢ Vite ↣ Rollup pre- bundling production bundle dev server
76. 五倍學院 HMR
77. 五倍學院 https: // 5xcamp.us/mwc-vite
78. 五倍學院 https: // twitter.com/youyuxi/status/1709943106215530867
79. 五倍學院 Rollup ↣ Rolldown
80. 五倍學院 Rust
81. 五倍學院 https: // 5xcamp.us/ithome-rust
82. 五倍學院 importmap
83. 五倍學院 <script type="module"> </ script>
84. 五倍學院 <script type="importmap"> </ script>
85. 五倍學院 <!DOCTYPE html> <html> <head> <title>MWC 2023 </ title> <script type="importmap"> { "imports": { "dayjs": "https: // ga.jspm.io/npm:dayjs@1.11.7/dayjs.min.js" } } < / script> </ head> <body> < / body> < / html>
86. 五倍學院 這不就 CDN 嗎？
87. 五倍學院 <!DOCTYPE html> <html> <head> <title>MWC 2023 </ title> <script type="importmap"> { "imports": { "dayjs": "https: / / ga.jspm.io/npm:dayjs@1.11.7/dayjs.min.js", "mwc-day": "https: // ga.jspm.io/npm:dayjs@1.11.7/dayjs.min.js" } } </ script> <script type="module"> import day from "dayjs" import d from "mwc-day" </ script> < / head> <body> < / body> < / html>
88. 五倍學院 no bundle
89. 五倍學院 這樣效能好嗎？CDN 穩定嗎？
90. 五倍學院 https: // 5xcamp.us/
91. 五倍學院 擺脫 node_modules！ 🙌
92. 五倍學院 更多關於 importmap
93. 五倍學院 12/16
94. 五倍學院 工商服務 實體、線上課程、企業內訓 有時間 來實體 沒時間 買線上
95. 五倍學院 工商服務 Node / Python / Django / Rust 課程 有時間 來實體 沒時間 買線上
96. 五倍學院 愛玩、愛現，喜歡冷門的玩具 網站開發者、講師、作家 技術推廣、企業訓練、技術諮詢 部落格：kaochenlong.com 高見龍 @eddiekao