Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue with Vite

Vue with Vite

kazupon

May 12, 2021
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group

    Organizer Creator of Vue I18n & Intlify @kazu_pon kazupon kazupon
  2. Vite • ࡞ऀ: Evan You • ໊લ: pronounced `/vit/` •

    GitHub ϨϙδτϦ: https://vitejs/vite
  3. ϒϥ΢βपΓΛऔΓר͘ঢ়گ • IE11 ͸ɺEOL Λ ଴ͨͣʹओཁ αʔϏεɺͦ͠ ͯ OSS ք۾΋α

    ϙʔτଧͪ੾Δ ྲྀΕ https://github.com/vuejs/rfcs/discussions/296 Vite ͸͜͏ͨ͠ঢ়گΛ ݟਾ͑ͯ࡞ΒΕͨ ະདྷࢤ޲ͳπʔϧʂ
  4. ϑϨʔϜϫʔΫʹґଘ͠ͳ͘ͳͬͨ • Vite 0.x ͷͱ͖͸ Vue ʹಛԽ͍ͯͨ͠ • Vite 2

    ͸θϩ͔Β࠶ઃ ܭ • Scaffold͢ΔϓϩδΣ ΫτςϯϓϨʔτͷΈ ͸ެࣜͰఏڙ͢Δ
  5. ৽͍͠ϓϥάΠϯػߏͱAPIͷચ࿅ • WMR͔ΒӨڹΛड ͚ͨϓϥάΠϯػ ߏ • ϓϥάΠϯ͸ Rollup ޓ׵ϑοΫ +

    Vite ಠࣗϑοΫ + Vite ಠࣗڍಈௐ੔ https://vite-rollup-plugins.patak.dev/
  6. ESBuildΛ࢖ͬͨPre-Bundling • Rollup ͔Β ESBuild ʹ • ES Modules ϕʔε

    ͳ dev server ͰϘ τϧωοΫʹͳͬͯ ͍ͨύϑΥʔϚϯε Λ10 ʙ100 ഒύ ϑΥʔϚϯεվળ https://twitter.com/youyuxi/status/1354447126093307905
  7. CSS όϯυϦϯά΋αϙʔτ • @import / url() ͷύεΛ Vite ͷϦκϧό ʹΑͬͯղܾ

    • url()ύε͸ Vite ͕ࣗಈతʹϦϕʔε • JS ͷ code spliting ʹରԠͨ͠ CSS ͷ code spliting ͷੜ੒
  8. ͦͷଞͷࡉ͔͍มߋ • dev-server ͷ back-end ͷมߋ • koa ͔Β connect

    ΁ • Vite ࣗମ΋όϯυϧ͍ͯ͠Δ • ґଘύοέʔδ͸ͨͬͨͷ 4 ͭʂ
  9. ηοτΞοϓ • Vue CLI ΛΠϯε τʔϧ͔ͯ͠Β `vue create` ίϚϯ υΛ࣮ߦ͢Δ

    • ࣮ߦޙɺର࿩ܗࣜͰ ඞཁͳπʔϧΛબ୒ ͢Δ͜ͱͰϓϩδΣ Ϋτ͕࡞੒͞ΕΔ
  10. ηοτΞοϓͰ͖Δ Vue όʔδϣϯ • σϑΥϧτ Vue 3 ޲͚ͷϓϩδΣΫτ • Vue

    2 ޲͚͸Ұ౓ηοτΞοϓޙɺ`vite- plugin-vue2` ΛΠϯετʔϧ͢Δ͜ͱͰՄ ೳ https://github.com/underfin/vite-plugin-vue2
  11. TypeScript ޲͚ͷηοτΞοϓ • vue-tsc Vue ޲͚ʹ TypeScript ͷܕνΣοΫ͕ಛ Խ͞Εͨ CLIπʔϧ

    https://github.com/johnsoncodehk/vue-tsc template ΋ܕνΣοΫΛͯ͘͠Δʂ
  12. vue-tsc ͷ։ൃऀ͸ Volar ͷ։ൃऀ • Volar ͸ Vue 3 ޲͚ͷ

    VSCode ֦ு • Template ͷܕνΣοΫ΋ͯ͘͠ΕΔ https://github.com/johnsoncodehk/volar
  13. TypeScript ޲͚ϓϩδΣΫτͰ͸… • package.json ʹ͸ҎԼ͕ઃఆ͞Ε͍ͯΔ ͨΊɺܕνΣοΫ -> ϏϧυͱͳΔ `vue-tsc --noEmit

    && vite build` ܕνΣοΫ͞Ε͍ͯΔͷͰݎ࿚ͳΞϓϦʹͳΔʂ (஫ҙ: Ϗϧυ࣌ͷܕνΣοΫ͸෼཭͞ΕΔՄೳੑ΋͋Γ)
  14. ϏϧυपΓͷઃఆ • ҎԼͷ I/F Ͱ webpack.config ૬౰͕Մೳ - configureWebpack -

    chainWebpack • ύϑΥʔϚϯε࠷దԽͱ ͍ͬͨڽͬͨόϯυϦϯά ઃఆ͢Δʹ͸ɺVue CLI ଆ ͷ webpack ͷઃఆΛཧղ ͢Δඞཁ͕͋Γ • ͦͷͨΊ Vue CLI ͸ `vue inspect` Λ༻ҙ͍ͯ͠Δ
  15. Vue CLI ϓϥάΠϯͷઃఆ • `pluginOptions` ʹઃఆͰ͖ͯ vue.config.jsͰҰ ׅ؅ཧ • ઃఆ͸େ఍

    Vue CLIϓϥάΠϯΠ ϯετʔϧ࣌ʹࣗ ಈతʹߦΘΕΔ https://cli.vuejs.org/config/#pluginoptions
  16. Vite ϓϥάΠϯͷઃఆ • `plugins` Φϓγϣϯ Ͱ import ͨ͠ Vite ϓϥάΠϯؔ਺ͷΦ

    ϓγϣϯͰࢦఆ͕ඞ ཁ • Vue CLI ͷΑ͏ͳί ϚϯυͰ Vite ϓϥά ΠϯͰ͖ͳ͍ͨΊɺ ࣗ෼Ͱઃఆ͕ඞཁ
  17. `--target` ΦϓγϣϯͰग़དྷΔ • Vue CLI ͷϓϩδΣΫτΛଞͷΞϓϦέʔ γϣϯͰར༻Ͱ͖ΔϥΠϒϥϦͱͯ͠Ϗ ϧυͰ͖Δ • Web

    Components Ϗϧυ͕Ͱ͖Δ https://cli.vuejs.org/guide/build-targets.html#build-targets
  18. όοΫΤϯυ࿈ܞ • Vue CLI • ઃఆ `devServer.proxy`ΦϓγϣϯͰϓϩΩγΛ࢖ͬͯ࿈ܞ Ͱ͖Δ • Vite

    • ઃఆ `server.proxy`ΦϓγϣϯͰϓϩΩγͰ͖Δ • ϚχϑΣετػߏ࢖͏ͱόοΫΤϯυͱVite͕γʔϜϨε ʹͰ͖Δ • ༗໊ॴ͸ Vite ϓϥάΠϯೖΕΔ͚ͩ e.g. Rails ͸ Vite Ruby https://github.com/ElMassimo/vite_ruby
  19. ϓϥάΠϯΞοϓάϨʔυ • Vue CLI `vue upgrade` Ͱ Vue CLI ؔ࿈ͷύοέʔ

    δΛΞοϓάϨʔυͰ͖Δ • Vite ύοέʔδϚωʔδϟʔ͕༻ҙ͍ͯ͠Δ ΋ͷͰΞοϓάϨʔυ e.g. `npm upgrade`
  20. GUI ʹΑΔ։ൃࢧԉ • Vue CLI Vue CLI UI (`vue ui`)Λఏڙ

    • Vite GUI͸ແ͍ - Dev Server ্ཱͪ͛ - Ϗϧυ - ϓϥάΠϯΠϯετʔϧ - ઃఆ؅ཧ … ͳͲ
  21. Vue CLI ͱ Vite ͱͰ։ൃʹ͍ͭͯൺֱ • جૅ • ϓϩδΣΫτ࡞੒ •

    Dev Server ্ཱͪ͛ • Ϗϧυ • Ԡ༻ • ϓϥάΠϯΠϯετʔϧ • ։ൃ؀ڥઃఆ • ϥΠϒϥϦϏϧυ • ͦͷଞ • όοΫΤϯυ࿈ܞ • ϓϥάΠϯΞοϓάϨʔυ • ϓϥάΠϯϚΠάϨʔγϣϯ • GUI ʹΑΔ։ൃࢧԉ
  22. Vue CLI ͸… • ݱ࣌఺Ͱ͸ Vue 2 ޲͚ • ES2015

    & ES Modules ͕࢖͑ͳ͍ϨΨ γʔͳϒϥ΢βͰͷಈ࡞Λ૝ఆ • Vue CLI ͕ੜ·Εͨഎܠࣄ৘͔Β։ൃࢧ ԉ͕खް͍
  23. Vite ͸… • σϑΥϧτ Vue 3 ޲͚ • ES2015 &

    ES Modules ͕࢖͑ΔϞμϯͳϒϥ ΢βͰͷಈ࡞Λ૝ఆ • Dev Server ͷ্ཱ͕ͪΓͱϏϧυͷ଎͞ͷ DX ͸ Vue CLI ΑΓ΋֨ஈ্ʂ • Vue CLI ͷΑ͏ͳखް͍։ൃࢧԉ·Ͱɺ·ͨ४ උͰ͖͍ͯͳ͍͕ɺ࣮ફతͳ։ൃ͸ग़དྷΔʂ