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

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

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

五倍學院

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

五倍學院

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

五倍學院模組化？

五倍學院 JavaScript = 玩具 1995 年

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

五倍學院石器時代

五倍學院模組化？

五倍學院 no module

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

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

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

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

五倍學院套件放在 <head> 裡，自己寫的放 </body> 前

五倍學院污染全域變數

五倍學院使用 IIFE Immediately Invoked Function Expression

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

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

五倍學院戰國時代

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

五倍學院 CommonJS

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

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

console.log("ModernWeb Conference") } module.exports.MWC = MWC 這是什麼？

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

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

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

console.log("ModernWeb Conference") } exports.MWC = MWC exports = "謝謝你 9527" console.log(exports) // 印出謝謝你 9527 console.log(module.exports) // { MWC: [Function: MWC] } 咦？

五倍學院同步載入

五倍學院 AMD Asynchronous Module Definition

五倍學院非同步

五倍學院 require.js

五倍學院 // 我是 hello.js define(function () { const hello =
function () { console.log("HELLO") } return { hello, } }) // 我是 world.js define(function () { const world = function () { console.log("WORLD") } return { world, } }) 模組模組

五倍學院 <!DOCTYPE html> <html> <head> <script src="require.js" data-main="main"> </ script>
<title>MWC 2023 </ title> </ head> <body> </ body> </ html> 發動！

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

五倍學院 UMD Universal Module Definition

五倍學院 (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

五倍學院 jQuery

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

五倍學院 ESM? ES Module 2015 年

五倍學院工業革命時代

五倍學院 Node = 蒸汽機

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

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

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

五倍學院 webpack.config.js 🤮

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

五倍學院 esbuild

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

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

五倍學院為什麼這麼快？

五倍學院 Go

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

五倍學院 Zig

五倍學院大內捲時代

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

五倍學院 Tree-Shaking 除屑優化

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

五倍學院

五倍學院現代

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

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

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

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

五倍學院

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

五倍學院 <!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>

五倍學院

五倍學院 Vite /vit/

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

五倍學院 Vite 不是打包工具

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

五倍學院 HMR

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

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

五倍學院 Rollup ↣ Rolldown

五倍學院 Rust

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

五倍學院 importmap

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

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

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

五倍學院這不就 CDN 嗎？

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

五倍學院 no bundle

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

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

五倍學院擺脫 node_modules！ 🙌

五倍學院更多關於 importmap

五倍學院 12/16

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

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

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

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

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

More Decks by 高見龍

Other Decks in Programming

Featured

Transcript