Vite νλ¬κ·ΈμΈ: νλ‘μ νΈ μ΅μ νλ₯Ό μν μμΈ μ€λͺ κ³Ό μΆκ° μΆμ² νλ¬κ·ΈμΈ
Viteλ λΉ λ₯Έ κ°λ° μλμ μ΅μ νλ λΉλ νλ‘μΈμ€λ₯Ό μ 곡νλ λꡬλ‘, λ€μν νλ¬κ·ΈμΈμ νμ©νμ¬ νλ‘μ νΈμ μμ°μ±μ λμΌ μ μμ΅λλ€. μλμμλ λͺ κ°μ§ μ£Όμ Vite νλ¬κ·ΈμΈμ μμΈν μ€λͺ νκ³ , μΆκ°λ‘ μ μ©ν νλ¬κ·ΈμΈμ μκ°ν©λλ€.
1. vite-plugin-checker
μ€λͺ :
vite-plugin-checker
λ νλ‘μ νΈμμ μ¬μ©λλ μ£Όμ λꡬλ€μ worker thread λ΄μμ μ€ννμ¬ μ±λ₯μ ν₯μμν΅λλ€. Typescript, VLS(Vetur Language Server), vue-tsc, ESLint, Stylelintλ₯Ό λ³λ ¬λ‘ μ²λ¦¬ν¨μΌλ‘μ¨ κ°λ° νκ²½μ μ΅μ νν©λλ€.
μ¬μ© μμ:
// vite.config.js
import Checker from 'vite-plugin-checker';
export default {
plugins: [
Checker({ typescript: true, vue: true, eslint: true, stylelint: true }),
],
};
2. vite-plugin-vue-layouts
μ€λͺ :
vite-plugin-vue-layouts
λ Vue 3 μ΄ν리μΌμ΄μ
μμ λΌμ°ν° λ μ΄μμμ κ΄λ¦¬νκΈ° μν ν¨κ³Όμ μΈ λꡬμ
λλ€. λ μ΄μμ κ°μ μ νμ΄λ λΌμ°ν
μ λ°λΌ λμ μΌλ‘ λ μ΄μμμ κ΄λ¦¬ν μ μμ΅λλ€.
μ¬μ© μμ:
// vite.config.js
import VueLayouts from 'vite-plugin-vue-layouts';
export default {
plugins: [
VueLayouts(),
],
};
3. vite-plugin-pages
μ€λͺ :
vite-plugin-pages
λ νμΌ μμ€ν
κΈ°λ°μ λΌμ°ν
μ μ 곡νμ¬ λμ μΈ νμ΄μ§ λΌμ°ν
μ μ½κ² ꡬνν μ μμ΅λλ€. vite-plugin-vue-layouts
μ ν¨κ» μ¬μ©νμ¬ ν¨κ³Όμ μΈ λΌμ°ν
μ ꡬμ±ν μ μμ΅λλ€.
μ¬μ© μμ:
// vite.config.js
import VuePages from 'vite-plugin-pages';
export default {
plugins: [
VuePages(),
],
};
4. unplugin-vue-components
μ€λͺ :
unplugin-vue-components
λ Vue μ»΄ν¬λνΈμ μλ μν¬ν
μ λ΄λΉνλ νλ¬κ·ΈμΈμ
λλ€. μ»΄ν¬λνΈλ₯Ό μλμΌλ‘ μν¬νΈνμ§ μκ³ μλμΌλ‘ λ‘λν μ μμ΅λλ€.
μ¬μ© μμ:
// vite.config.js
import { VueComponents } from 'unplugin-vue-components/vite';
export default {
plugins: [
VueComponents(),
],
};
5. vite-plugin-style-import
μ€λͺ :
vite-plugin-style-import
λ μ»΄ν¬λνΈ λΌμ΄λΈλ¬λ¦¬ μ€νμΌμ νκ²½μ λ°λΌ μλμΌλ‘ μν¬νΈν μ μλλ‘ μ§μν©λλ€. λ€μν νκ²½μμ μ€νμΌμ μλμΌλ‘ μ μ©ν μ μμ΅λλ€.
μ¬μ© μμ:
// vite.config.js
import ViteStyleImport from 'vite-plugin-style-import';
export default {
plugins: [
ViteStyleImport(),
],
};
6. vite-plugin-html
μ€λͺ :
vite-plugin-html
μ HTMLμ ν¨κ³Όμ μΌλ‘ κ΄λ¦¬νκΈ° μν λ€μν κΈ°λ₯μ μ 곡ν©λλ€. HTML μμΆ, EJS ν
νλ¦Ώ, λ€μ€ νμ΄μ§ μ§μ λ±μ μ 곡νμ¬ μΉ μ ν리μΌμ΄μ
μ HTML μμ
μ μ©μ΄νκ² ν©λλ€.
μ¬μ© μμ:
// vite.config.js
import ViteHtmlPlugin from 'vite-plugin-html';
export default {
plugins: [
ViteHtmlPlugin(),
],
};
7. vite-plugin-inspect
μ€λͺ :
vite-plugin-inspect
λ Vite νλ¬κ·ΈμΈμ μ€κ° μνλ₯Ό κ²μ¬νμ¬ λλ²κΉ
λ° νλ¬κ·ΈμΈ κ°λ°μ λμμ μ£Όλ λꡬμ
λλ€. νλ¬κ·ΈμΈμ λμμ μκ°μ μΌλ‘ νμΈν μ μμ΅λλ€.
μ¬μ© μμ:
// vite.config.js
import ViteInspect from 'vite-plugin-inspect';
export default {
plugins: [
ViteInspect(),
],
};
8. vite-plugin-vue-inspector
μ€λͺ :
vite-plugin-vue-inspector
λ λΈλΌμ°μ μμ Vue μ리먼νΈλ₯Ό ν΄λ¦νλ©΄ λ‘컬 IDEλ‘ μλμΌλ‘ μ΄λν μ μλ νΈλ¦¬ν κΈ°λ₯μ μ 곡ν©λλ€. κ°λ°μκ° μ½λλ₯Ό μ½κ² λλ²κΉ
ν μ μλλ‘ λμμ€λλ€.
μ¬μ© μμ:
// vite.config.js
import VueInspector from 'vite-plugin-vue-inspector';
export default {
plugins: [
VueInspector(),
],
};
9. vite-plugin-vue-markdown
μ€λͺ :
vite-plugin-vue-markdown
μ Markdownμ Vue μ»΄ν¬λνΈλ‘ μ¬μ©νκ³ Vue μ»΄ν¬λνΈλ₯Ό Markdownμμ μ¬μ©ν μ μλλ‘ μ§μν©λλ€. λ¬Έμν μμ
μ ν¨κ³Όμ μΌλ‘ μνν μ μμ΅λλ€.
μ¬μ© μμ:
// vite.config.js
import VueMarkdown from 'vite-plugin-vue-markdown';
export default {
plugins: [
VueMarkdown(),
],
};
10. vite-plugin-fonts
μ€λͺ :
vite-plugin-fonts
λ Viteλ₯Ό μν μΉν°νΈ λ‘λλ‘, μΉ μ ν리μΌμ΄μ
μ νμν ν°νΈλ₯Ό ν¨κ³Όμ μΌλ‘ λ‘λνκ³ μ¬μ©ν μ μμ΅λλ€.
μ¬μ© μμ:
// vite.config.js
import ViteFonts from 'vite-plugin-fonts';
export default {
plugins: [
ViteFonts(),
],
};
11. rollup-plugin-visualizer
(μ νμ - λ‘€μ
)
μ€λͺ :
rollup-plugin-visualizer
λ λ²λ€λ§λ νμΌμ΄ μΌλ§λ λ§μ 곡κ°μ μ°¨μ§νκ³ μλμ§ μκ°μ μΌλ‘ νμΈν μ μλ λꡬμ
λλ€. λ²λ€ ν¬κΈ° μ΅μ νμ λμμ΄ λ©λλ€.
μ¬μ© μμ:
// rollup.config.js
import Visualizer from 'rollup-plugin-visualizer';
export default {
plugins: [
Visualizer(),
],
};
μ΄λ¬ν νλ¬κ·ΈμΈλ€μ μ‘°ν©νμ¬ Vite κΈ°λ°μ νλ‘μ νΈλ₯Ό ν¨κ³Όμ μΌλ‘ ꡬμ±νκ³ μ΅μ νν μ μμ΅λλ€. νλ‘μ νΈ μꡬμ λ°λΌ νμν νλ¬κ·ΈμΈμ μ ννκ³ μ μ ν νμ©νμ¬ κ°λ° μμ°μ±μ ν₯μμμΌλ³΄μΈμ.
'IT' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
ChatGPT(OpenAI) λ₯Ό νμ©ν Code Review (0) | 2024.02.06 |
---|---|
Jupyter Notebook: λ°μ΄ν° κ³Όνμμ νμ λꡬ (0) | 2022.12.02 |
Vite(λΉ λ₯΄λ€): λͺ¨λ μΉ νλ‘μ νΈμ λ―Έλ (0) | 2022.11.23 |
[λ°μ΄ν° ꡬ쑰] λ°μ΄ν° ꡬ쑰 (0) | 2022.11.03 |
Blocking-NonBlocking-Sync-Async (0) | 2022.11.03 |
λκΈ