$30 off During Our Annual Pro Sale. View Details »

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

高見龍
November 08, 2023
Programming
0
850

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

高見龍

November 08, 2023
Tweet

More Decks by 高見龍

See All by 高見龍
Git 和 DevOps - 在混亂的流星群開發流程中找到小確幸
eddie
1
860
被 Vue 框架耽誤的建置工具
eddie
1
750
開開心心寫測試，你的程式碼也會微笑
eddie
1
1.1k
Functional Ruby
eddie
0
180
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
620
Learn JavaScript Well
eddie
1
1.2k
How to Learn Web Framework Correctly
eddie
4
1.9k
about-5xruby
eddie
0
110
Ruby on Rails 2018 年進化論
eddie
0
150

Other Decks in Programming

See All in Programming
リーンスタートアップのリーンな品質の話
techouse
0
340
B2B SaaSでSpringSecurityによる Roleを用いたユーザー権限設定の 実装について
rakus_dev
1
170
The Secret Ingredient: How to Understand and Resolve Just about Any Flaky Test
aridlehoover
PRO
1
180
Prepare for Jakarta EE 11
ivargrimstad
0
1.3k
Foreign Function & Memory API ( FFM API )を用いたNativeライブラリ呼び出しと既存ライブラリの比較 ( JJUG CCC 2023 Fall )
hiroisojp
1
310
アクセシビリティを理解するとフロントエンドのテストが楽になる！
nano72mkn
1
1.7k
Hono v3 and v4
yusukebe
4
2.5k
Organizational Pattern Hatching
koic
0
230
How to Be a Responsible Open Source Citizen
ivargrimstad
0
1.1k
JavaScript なしで動作するモダンなコードの書き方
azukiazusa1
14
8.9k
VimConf 2023 Tiny
skanehira
1
210
Expo Router は Expo 導入の決め手となるか フロントエンドカンファレンス沖縄2023 @Kaito-Dogi
doggy
3
1.5k

Featured

See All Featured
RailsConf 2023
tenderlove
0
340
GraphQLの誤解/rethinking-graphql
sonatard
45
8.7k
Optimising Largest Contentful Paint
csswizardry
6
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
34
2.2k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
12k
Web Components: a chance to create the future
zenorocha
304
41k
Docker and Python
trallard
31
2.4k
WebSockets: Embracing the real-time Web
robhawkes
58
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
870
Thoughts on Productivity
jonyablonski
55
3.5k
GitHub's CSS Performance
jonrohan
1021
440k

Transcript

  1. 五倍學院
    從亂七八糟到組織有序

    View Slide

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

    View Slide

  3. 五倍學院

    View Slide

  4. 五倍學院
    從亂七八糟到組織有序

    View Slide

  5. 五倍學院

    View Slide

  6. 五倍學院
    前端？不就是寫網頁的嘛

    View Slide

  7. 五倍學院
    模組化？

    View Slide

  8. 五倍學院
    JavaScript = 玩具
    1995 年

    View Slide

  9. 五倍學院
    你知道在最初版本的 JS
    是沒有陣列的嗎？

    View Slide

  10. 五倍學院
    石器時代

    View Slide

  11. 五倍學院
    模組化？

    View Slide

  12. 五倍學院
    no module

    View Slide

  13. 五倍學院
    <br/>$().ready(function () {<br/>console.log("MWC 2023");<br/>});<br/></<br/>script> $<br/>

    View Slide

  14. 五倍學院
    <br/><<br/>/<br/>script><br/><script type="text/javascript"><br/>$().ready(function () {<br/>console.log("MWC 2023");<br/>});<br/></<br/>script><br/>

    View Slide

  15. 五倍學院
    載入的順序很重要

    View Slide

  16. 五倍學院
    <br/>$().ready(function () {<br/>console.log("MWC 2023");<br/>});<br/></<br/>script><br/><script src="jquery.min.js"><br/><<br/>/<br/>script><br/>

    View Slide

  17. 五倍學院
    套件放在 裡，
    自己寫的放 前

    View Slide

  18. 五倍學院
    污染全域變數

    View Slide

  19. 五倍學院
    使用 IIFE
    Immediately Invoked Function Expression

    View Slide

  20. 五倍學院
    const MyApp = MyApp || {}
    MyApp.UserModule = (function () {
    //
    登入功能
    function login(username, password) {}
    //
    登出功能
    function logout() {}
    return { login, logout }
    })()
    MyApp.UserModule.login("mwc", "2023")
    MyApp.UserModule.logout()
    模組化！

    View Slide

  21. 五倍學院
    官方不做，社群做！

    View Slide

  22. 五倍學院
    戰國時代

    View Slide

  23. 五倍學院
    群魔亂舞 / 群雄割據
    CommonJS, AMD/CMD, UMD...etc

    View Slide

  24. 五倍學院
    CommonJS

    View Slide

  25. 五倍學院
    //
    我是 mwc_mod.js
    const MWC = function () {
    console.log("ModernWeb Conference")
    }
    module.exports.MWC = MWC

    View Slide

  26. 五倍學院
    //
    我是 main.js
    const mod = require("./mwc_mod.js")
    console.log(mod)
    //
    { MWC: [Function: MWC] }
    mod.MWC()
    //
    印出 ModernWeb Conference

    View Slide

  27. 五倍學院
    //
    我是 mwc_mod.js
    const MWC = function () {
    console.log("ModernWeb Conference")
    }
    module.exports.MWC = MWC
    這是什麼？

    View Slide

  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'
    //
    ]
    //
    }
    在這裡！

    View Slide

  29. 五倍學院
    console.log(module.exports === exports) // true

    View Slide

  30. 五倍學院
    const MWC = function () {
    console.log("ModernWeb Conference")
    }
    //
    module.exports.MWC = MWC
    exports.MWC = MWC
    同樣效果

    View Slide

  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] }
    咦？

    View Slide

  32. 五倍學院
    同步載入

    View Slide

  33. 五倍學院
    AMD
    Asynchronous Module Definition

    View Slide

  34. 五倍學院
    非同步

    View Slide

  35. 五倍學院
    require.js

    View Slide

  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,
    }
    })
    模組
    模組

    View Slide

  37. 五倍學院



    <br/></<br/>script><br/><title>MWC 2023<br/></<br/>title><br/></<br/>head><br/><body><br/></<br/>body><br/></<br/>html><br/>發動！<br/>

    View Slide

  38. 五倍學院
    //
    我是 main.js
    require(["hello", "world"], function (h, w) {
    h.hello()
    w.world()
    }) 載入

    View Slide

  39. 五倍學院
    UMD
    Universal Module Definition

    View Slide

  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

    View Slide

  41. 五倍學院
    jQuery

    View Slide

  42. 五倍學院
    https:
    //
    5xcamp.us/jquery-source

    View Slide

  43. 五倍學院
    ESM?
    ES Module
    2015 年

    View Slide

  44. 五倍學院
    工業革命時代

    View Slide

  45. 五倍學院
    Node = 蒸汽機

    View Slide

  46. 五倍學院
    轉譯、打包、建置工具！

    View Slide

  47. 五倍學院
    https:
    //
    webpack.js.org/

    View Slide

  48. 五倍學院
    支援多種模組系統
    CommonJS, AMD, ESM...etc

    View Slide

  49. 五倍學院
    webpack.config.js
    🤮

    View Slide

  50. 五倍學院
    https:
    //
    parceljs.org/

    View Slide

  51. 五倍學院
    esbuild

    View Slide

  52. 五倍學院
    天下武功，唯快不破

    View Slide

  53. 五倍學院
    https:
    //
    esbuild.github.io/

    View Slide

  54. 五倍學院
    為什麼這麼快？

    View Slide

  55. 五倍學院
    Go

    View Slide

  56. 五倍學院
    https:
    //
    bun.sh/

    View Slide

  57. 五倍學院
    Zig

    View Slide

  58. 五倍學院
    大內捲時代

    View Slide

  59. 五倍學院
    https:
    //
    rollupjs.org/

    View Slide

  60. 五倍學院
    Tree-Shaking
    除屑優化

    View Slide

  61. 五倍學院
    //
    我是 extra_fish.js
    const
    工
    具
    人
    = "🛠🔨🔧⛏"
    function 多餘() {
    console.log("不是多了塊
    魚
    🐟，是多餘，你呀，你根本就是多餘呀你")
    }
    function MWC(year) {
    return `ModernWeb Conference ${year}`
    }
    console.log(MWC(2023))
    :)

    View Slide

  62. 五倍學院

    View Slide

  63. 五倍學院
    現代

    View Slide

  64. 五倍學院
    瀏覽器原生支援 ESM！
    import vue from 'react'
    🙌

    View Slide

  65. 五倍學院
    https:
    //
    developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/import

    View Slide

  66. 五倍學院
    <br/></<br/>script><br/>

    View Slide

  67. 五倍學院



    MWC 2023

    title>
    <br/>import has from "lodash-es/has.js"<br/></<br/>script><br/></<br/>head><br/><body><br/></<br/>body><br/></<br/>html><br/>

    View Slide

  68. 五倍學院

    View Slide

  69. 五倍學院



    MWC 2023

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

    View Slide

  70. 五倍學院



    MWC 2023
    < /
    title>
    <br/>import day from "./node_modules/dayjs/dayjs.min.js"<br/></<br/>script><br/><<br/>/<br/>head><br/><body><br/></<br/>body><br/></<br/>html><br/>

    View Slide

  71. 五倍學院

    View Slide

  72. 五倍學院
    Vite /vit/

    View Slide

  73. 五倍學院
    Vite 不是 Vue 的專武！

    View Slide

  74. 五倍學院
    Vite 不是打包工具

    View Slide

  75. 五倍學院
    esbuild ↢ Vite ↣ Rollup
    pre-
    bundling
    production
    bundle
    dev server

    View Slide

  76. 五倍學院
    HMR

    View Slide

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

    View Slide

  78. 五倍學院
    https:
    //
    twitter.com/youyuxi/status/1709943106215530867

    View Slide

  79. 五倍學院
    Rollup ↣ Rolldown

    View Slide

  80. 五倍學院
    Rust

    View Slide

  81. 五倍學院
    https:
    //
    5xcamp.us/ithome-rust

    View Slide

  82. 五倍學院
    importmap

    View Slide

  83. 五倍學院
    <br/></<br/>script><br/>

    View Slide

  84. 五倍學院
    <br/></<br/>script><br/>

    View Slide

  85. 五倍學院



    MWC 2023

    title>
    <br/>{<br/>"imports": {<br/>"dayjs": "https:<br/>//<br/>ga.jspm.io/npm:[email protected]/dayjs.min.js"<br/>}<br/>}<br/><<br/>/<br/>script><br/></<br/>head><br/><body><br/><<br/>/<br/>body><br/><<br/>/<br/>html><br/>

    View Slide

  86. 五倍學院
    這不就 CDN 嗎？

    View Slide

  87. 五倍學院



    MWC 2023

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

    View Slide

  88. 五倍學院
    no bundle

    View Slide

  89. 五倍學院
    這樣效能好嗎？CDN 穩定嗎？

    View Slide

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

    View Slide

  91. 五倍學院
    擺脫 node_modules！
    🙌

    View Slide

  92. 五倍學院
    更多關於 importmap

    View Slide

  93. 五倍學院
    12/16

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide