๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
728x90

Vite2

[Plugins] Vite Plugins Vite ํ”Œ๋Ÿฌ๊ทธ์ธ: ํ”„๋กœ์ ํŠธ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ ์ƒ์„ธ ์„ค๋ช…๊ณผ ์ถ”๊ฐ€ ์ถ”์ฒœ ํ”Œ๋Ÿฌ๊ทธ์ธ Vite๋Š” ๋น ๋ฅธ ๊ฐœ๋ฐœ ์†๋„์™€ ์ตœ์ ํ™”๋œ ๋นŒ๋“œ ํ”„๋กœ์„ธ์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋„๊ตฌ๋กœ, ๋‹ค์–‘ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ™œ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ์˜ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์—์„œ๋Š” ๋ช‡ ๊ฐ€์ง€ ์ฃผ์š” Vite ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ณ , ์ถ”๊ฐ€๋กœ ์œ ์šฉํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. 1. vite-plugin-checker ์„ค๋ช…: vite-plugin-checker๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ฃผ์š” ๋„๊ตฌ๋“ค์„ worker thread ๋‚ด์—์„œ ์‹คํ–‰ํ•˜์—ฌ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค. Typescript, VLS(Vetur Language Server), vue-tsc, ESLint, Stylelint๋ฅผ ๋ณ‘๋ ฌ๋กœ ์ฒ˜๋ฆฌํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ ์˜ˆ์‹œ: // vite.config.js i.. 2022. 11. 23.
Vite(๋น ๋ฅด๋‹ค): ๋ชจ๋˜ ์›น ํ”„๋กœ์ ํŠธ์˜ ๋ฏธ๋ž˜ Vite(๋น ๋ฅด๋‹ค): ๋ชจ๋˜ ์›น ํ”„๋กœ์ ํŠธ์˜ ๋ฏธ๋ž˜ Vite(๋น ๋ฅด๋‹ค)๋Š” ํ”„๋ž‘์Šค์–ด๋กœ "๋น ๋ฅด๋‹ค(Quick)"๋ฅผ ์˜๋ฏธํ•˜๋ฉฐ, ๋ฐœ์Œ์€ "veet"์™€ ๋น„์Šทํ•œ /vit/์ž…๋‹ˆ๋‹ค. ์ด ๋„๊ตฌ๋Š” ๋น ๋ฅด๊ณ  ๊ฐ„๊ฒฐํ•œ ๋ชจ๋˜ ์›น ํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์— ์ดˆ์ ์„ ๋งž์ถ˜ ๋นŒ๋“œ ๋„๊ตฌ๋กœ, ๋„ค์ดํ‹ฐ๋ธŒ ES Module์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์—ฌ ๊ฐœ๋ฐœ ์‹œ์— ํƒ์›”ํ•œ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” Vite์˜ ์ฃผ์š” ํŠน์ง•๊ณผ ์ด์ ์— ๋Œ€ํ•œ ๋ณด๋‹ค ์ž์„ธํ•œ ์„ค๋ช…๊ณผ ์˜ˆ์ œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. 1. ํ•ต์‹ฌ ์ฝ˜์…‰ํŠธ Vite๋Š” ๋‹ค์Œ ๋‘ ๊ฐ€์ง€ ์ฝ˜์…‰ํŠธ๋ฅผ ์ค‘์‹ฌ์œผ๋กœ ๊ฐœ๋ฐœ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. 1.1 ๋„ค์ดํ‹ฐ๋ธŒ ES Module ์ง€์› Vite๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ES Module์„ ๋„˜์–ด ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ, Hot Module Replacement (HMR)๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ฐœ๋ฐœ ์ค‘์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์—…๋ฐ์ด.. 2022. 11. 23.