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

Vue with Vite

Vue with Vite

38bee248082f6071230de65e9d74a944?s=128

kazupon

May 12, 2021
Tweet

Transcript

  1. Vue with Vite Line Developer Meetup #72 Vue.js 2021.05.12 @kazupon

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

    Organizer Creator of Vue I18n & Intlify @kazu_pon kazupon kazupon
  3. ࠓ೔࿩͢͜ͱ

  4. ࠓ೔࿩͢͜ͱ • ࠷ۙϦϦʔε͞Εͨ Vite Λ࢖ͬͨ Vue ΞϓϦέʔγϣϯͷ։ൃʹͭ ͍ͯ

  5. ຊ୊ʹೖΔલʹ…

  6. Vite

  7. Vite • ࡞ऀ: Evan You • ໊લ: pronounced `/vit/` •

    GitHub ϨϙδτϦ: https://vitejs/vite
  8. Vite ͷಛ௃ https://github.com/vuejs-jp/vite-docs-ja

  9. Vite ͷຊ࣭తͳಛ௃ • ES Modules ͕ಈ࡞͢ΔϞμϯͳ ϒϥ΢β޲͚Λ૝ఆͨ͠ϑϩϯτ Τϯυ։ൃπʔϧ • طଘͷπʔϧ:

    WebPack ϕʔε • Vite: Rollup ϕʔε
  10. ϒϥ΢βपΓΛऔΓר͘ঢ়گ • IE 11 Ҏ֎ͷओཁϒϥ΢βͰ͸ ES Modules ͕࢖͑Δঢ়گ https://caniuse.com/es6-module

  11. ϒϥ΢βपΓΛऔΓר͘ঢ়گ • IE11 ͸ɺEOL Λ ଴ͨͣʹओཁ αʔϏεɺͦ͠ ͯ OSS ք۾΋α

    ϙʔτଧͪ੾Δ ྲྀΕ https://github.com/vuejs/rfcs/discussions/296 Vite ͸͜͏ͨ͠ঢ়گΛ ݟਾ͑ͯ࡞ΒΕͨ ະདྷࢤ޲ͳπʔϧʂ
  12. ਖ਼ࣜϦϦʔεલͷ͔Β Կ͕৽͘͠ͳͬͨͷ͔

  13. ϑϨʔϜϫʔΫʹґଘ͠ͳ͘ͳͬͨ • Vite 0.x ͷͱ͖͸ Vue ʹಛԽ͍ͯͨ͠ • Vite 2

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

    Vite ಠࣗϑοΫ + Vite ಠࣗڍಈௐ੔ https://vite-rollup-plugins.patak.dev/
  15. ৽͍͠ϓϥάΠϯػߏͱAPIͷચ࿅ • API ΋αʔυύʔςΟπʔϧɺϑϨʔϜ ϫʔΫ޲͚ʹ࢖͍΍͍͢ܗʹ https://vitejs.dev/guide/api-javascript.html

  16. ESBuildΛ࢖ͬͨPre-Bundling • Rollup ͔Β ESBuild ʹ • ES Modules ϕʔε

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

    • url()ύε͸ Vite ͕ࣗಈతʹϦϕʔε • JS ͷ code spliting ʹରԠͨ͠ CSS ͷ code spliting ͷੜ੒
  18. αʔόαΠυϨϯμϦϯάͷαϙʔτ • ES Modules ϕʔεͷαʔόαΠυϨΠϯ μϦϯάػߏͷఏڙ (ݱ࣌఺Ͱ͸࣮ݧతػೳ) • CommonJS ޓ׵ͷґଘؔ܎Λࣗಈతʹ֎

    ෦Խ
  19. ϨΨγʔϒϥ΢β޲͚ͷOpt-inఏڙ • Ϟμϯϒϥ΢βҎ֎ Ͱ΋ಈ࡞͢ΔΑ͏ ެࣜViteϓϥάΠϯ (`@vitejs/plugin- legacy`)Λఏڙ https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

  20. ͦͷଞͷࡉ͔͍มߋ • dev-server ͷ back-end ͷมߋ • koa ͔Β connect

    ΁ • Vite ࣗମ΋όϯυϧ͍ͯ͠Δ • ґଘύοέʔδ͸ͨͬͨͷ 4 ͭʂ
  21. ຊ୊

  22. جຊฤ

  23. ϓϩδΣΫτ ࡞੒ Vue CLI

  24. ηοτΞοϓ • Vue CLI ΛΠϯε τʔϧ͔ͯ͠Β `vue create` ίϚϯ υΛ࣮ߦ͢Δ

    • ࣮ߦޙɺର࿩ܗࣜͰ ඞཁͳπʔϧΛબ୒ ͢Δ͜ͱͰϓϩδΣ Ϋτ͕࡞੒͞ΕΔ
  25. ηοτΞοϓ • ηοτΞοϓ࣌ʹɺύοέʔδϚωʔδϟ ͷΠϯετʔϧ΋࣮ߦͯ͘͠ΕΔ

  26. ηοτΞοϓͰ͖Δ Vue όʔδϣϯ • σϑΥϧτ Vue 2 ޲͚ϓϩδΣΫτ • Vue

    3 ޲͚ͷϓϩδΣΫτ͸·ͩ Preview
  27. ϓϩδΣΫτ ࡞੒ Vite

  28. ηοτΞοϓ • `npm init @vitejs/app` ͔Β࡞੒Ͱ͖Δ • ίϚϯυ࣮ߦޙɺϑϨʔϜϫʔΫͱ࢖༻ݴ ޠΛબ୒͢ΔͱϓϩδΣΫτ͕ग़དྷ্͕ Δ

  29. ηοτΞοϓ • ηοτΞοϓ࣌ʹɺύοέʔδϚωʔδϟ ͷΠϯετʔϧ͸࣮ߦͯ͘͠Εͳ͍ʂ • ͜ͷͨΊɺࣗ෼ͰϓϩδΣΫτσΟϨΫτ Ϧ಺ͰΠϯετʔϧ͕ඞཁ ΠϯετʔϧΛ଴ͨͳͯ͘΋Α͍ͨΊɺҙࣝతʹ࣍ ͷ࡞ۀʹҠΕΔͨΊɺ։ൃ࡞ۀͷDX͕ྑ͍

  30. ηοτΞοϓͰ͖Δ Vue όʔδϣϯ • σϑΥϧτ Vue 3 ޲͚ͷϓϩδΣΫτ • Vue

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

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

    VSCode ֦ு • Template ͷܕνΣοΫ΋ͯ͘͠ΕΔ https://github.com/johnsoncodehk/volar
  33. Vite ޲͚ͷઃఆϑΝΠϧ͕࡞੒͞ΕΔ Vite Λ࢖ͬͨ։ൃͰඞཁ࠷௿ ݶͷ಺༰ΛηοτΞοϓ

  34. Dev Server ্ཱͪ͛ Vue CLI

  35. `serve` Λ࣮ߦ͢Δ • ίϚϯυͷ࣮ଶ ͸ `vue-cli-service` ͷ `serve` • ࣮ߦ͢Δͱ

    όϯυϧͨ͠ޙʹ ϩʔΧϧ্ʹ Dev Server ͕ىಈ͢Δ
  36. Dev Server ্ཱͪ͛ Vite

  37. `dev` Λ࣮ߦ͢Δ • ίϚϯυͷ࣮ଶ ͸ɺ`vite` • ࣮ߦ͢Δͱ όϯυϧ͠ͳ͍ ͰϩʔΧϧ্ʹ Dev

    Server ͕ى ಈ͢Δ ͙͢ʹ։ൃ͕Ͱ͖Δ DX ͕Α͍ʂ
  38. Ϗϧυ Vue CLI

  39. `build` Λ࣮ߦ͢Δ • npm scripts ͷ `build` ͔Β`vue-cli-service build` ͕࣮ߦ͞ΕΔ

  40. όϯυϧ͞Εͨίʔυ • ES2015 Λαϙʔτ͠ͳ͍ϒϥ΢βͰͷಈ ࡞Λ૝ఆͨ͠ίʔυʹɺσϑΥϧτͰτ ϥϯεύΠϧ͞ΕΔ • ES2015͕αϙʔτ͞Εͨ؀ڥͷΈʹͨ͠ ͍৔߹͸ɺ`--modern` Φϓγϣϯͷࢦఆ͕

    ඞཁ https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
  41. Ϗϧυ Vite

  42. `build` Λ࣮ߦ͢Δ • npm scripts ͷ `build` ͔Β`vite build` ͕࣮

    ߦ͞ΕΔ Ϗϧυ͸ߴ଎ʂ
  43. TypeScript ޲͚ϓϩδΣΫτͰ͸… • package.json ʹ͸ҎԼ͕ઃఆ͞Ε͍ͯΔ ͨΊɺܕνΣοΫ -> ϏϧυͱͳΔ `vue-tsc --noEmit

    && vite build` ܕνΣοΫ͞Ε͍ͯΔͷͰݎ࿚ͳΞϓϦʹͳΔʂ (஫ҙ: Ϗϧυ࣌ͷܕνΣοΫ͸෼཭͞ΕΔՄೳੑ΋͋Γ)
  44. όϯυϧ͞Εͨίʔυ • σϑΥϧτ ES2015 Ҏ্Λαϙʔτͨ͠ ίʔυʹτϥϯεύΠϧ͞ΕΔ • ϨΨγʔͳϒϥ΢β্Ͱಈ࡞ͤ͞ΔͨΊ ʹ͸ɺެࣜViteϓϥάΠϯ `@vitejs/plugin-

    legacy`͕ඞཁ
  45. Ԡ༻ฤ

  46. VueϓϥάΠϯ Πϯετʔϧ Vue CLI

  47. `vue add` ίϚϯυܦ༝ͰΠϯετʔϧ VueϓϥάΠϯ͕ಈ࡞ʹඞཁͳ ؀ڥ & ґଘύοέʔδΛ Vue CLIϓϥάΠϯܦ༝͚ͩͰ ϓϩδΣΫτʹηοτΞοϓ

  48. VueϓϥάΠϯ Πϯετʔϧ Vite

  49. ύοέʔδϚωʔδϟܦ༝ͰΠϯετʔϧ • VueϓϥάΠϯ͸ɺVite ܦ༝Ͱ͸ͳ͘௨ৗ ͷύοέʔδϚωʔδϟͰΠϯετʔϧ

  50. ։ൃΛ͞Βʹศར͢ΔͨΊʹ͸… • Vite ϓϥάΠϯΛύοέʔδϚωʔδϟʔ Ͱ devDeps ͱͯ͠Πϯετʔϧ͢Δ

  51. Πϯετʔϧޙɺઃఆ͕ඞཁ • Vite ͷઃఆϑΝΠϧʹΠϯετʔϧͨ͠ Vite ϓϥάΠϯΛઃఆ͢Δඞཁ͕͋Δ

  52. ։ൃ؀ڥઃఆ Vue CLI

  53. vue.config.js Ͱઃఆ͢Δ • ϏϧυɺDev SeverɺCSSɺPWAͳͲͷઃ ఆ͸͜ͷϑΝΠϧͰߦ͏ https://cli.vuejs.org/config/#vue-config-js

  54. ϏϧυपΓͷઃఆ • ҎԼͷ I/F Ͱ webpack.config ૬౰͕Մೳ - configureWebpack -

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

    Vue CLIϓϥάΠϯΠ ϯετʔϧ࣌ʹࣗ ಈతʹߦΘΕΔ https://cli.vuejs.org/config/#pluginoptions
  56. ։ൃ؀ڥઃఆ Vite

  57. vite.config.[tj]s Ͱઃఆ͢Δ • Vue CLI ͱ͸ҧ͍ɺϏϧυɺDev Serverप ΓͷόϯυϥʹಛԽ͞Εͨઃఆ͕Մೳ https://vitejs.dev/config/

  58. ϏϧυपΓͷઃఆ • `build` ΦϓγϣϯͰઃఆՄೳ • Rollup ϕʔεͳͷͰɺ `build.rollupOptions` Ͱࡉ͔͍ઃఆ͕Ͱ͖ Δ

  59. ϏϧυपΓͷઃఆ • Vite ͸ Rollup ޓ׵όϯυϥͳͷͰϏϧυ पΓ͸ࠞཚ͢ΔΑ͏ͳσϑΥϧτઃఆΛ Ճ͍͑ͯͳ͍ • ࢖͍΍͘͢͢ΔͨΊͷઃఆ͕Ճ͑ΒΕͯ

    ͍Δ͙Β͍ (e.g. JSONϑΝΠϧ)
  60. Vite ϓϥάΠϯͷઃఆ • `plugins` Φϓγϣϯ Ͱ import ͨ͠ Vite ϓϥάΠϯؔ਺ͷΦ

    ϓγϣϯͰࢦఆ͕ඞ ཁ • Vue CLI ͷΑ͏ͳί ϚϯυͰ Vite ϓϥά ΠϯͰ͖ͳ͍ͨΊɺ ࣗ෼Ͱઃఆ͕ඞཁ
  61. ϥΠϒϥϦ Ϗϧυ Vue CLI

  62. `--target` ΦϓγϣϯͰग़དྷΔ • Vue CLI ͷϓϩδΣΫτΛଞͷΞϓϦέʔ γϣϯͰར༻Ͱ͖ΔϥΠϒϥϦͱͯ͠Ϗ ϧυͰ͖Δ • Web

    Components Ϗϧυ͕Ͱ͖Δ https://cli.vuejs.org/guide/build-targets.html#build-targets
  63. Ϗϧυ͞Εͨίʔυ • ग़ྗ͞ΕΔܗࣜͱͯ͠͸ CommonJS ͱ UMD ͷΈ • ES Modules

    ܗࣜ͸ग़ྗͰ͖ͳ͍
  64. ϥΠϒϥϦ Ϗϧυ Vite

  65. Vite ͷઃఆϑΝΠϧͰग़དྷΔ • `build.lib` ΦϓγϣϯͰ Vite ͷϓϩδΣΫ τΛϥΠϒϥϦͱͯ͠ϏϧυͰ͖Δ https://vitejs.dev/guide/build.html#library-mode

  66. Ϗϧυ͞Εͨίʔυ • ग़ྗ͞ΕΔܗࣜͱͯ͠͸σϑΥϧτ ES Modules ͱ UMD ͷΈ • CommonJS

    ͱ IIFE ܗࣜ΋ `build.lib.formats` ΦϓγϣϯͰରԠՄೳ
  67. ͦͷଞ

  68. όοΫΤϯυ࿈ܞ • Vue CLI • ઃఆ `devServer.proxy`ΦϓγϣϯͰϓϩΩγΛ࢖ͬͯ࿈ܞ Ͱ͖Δ • Vite

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

    δΛΞοϓάϨʔυͰ͖Δ • Vite ύοέʔδϚωʔδϟʔ͕༻ҙ͍ͯ͠Δ ΋ͷͰΞοϓάϨʔυ e.g. `npm upgrade`
  70. ϓϥάΠϯϚΠάϨʔγϣϯ • Vue CLI Vue CLI ϓϥάΠϯͷϚΠάϨʔγϣϯػ ߏ(APIͱ`vue migration`ίϚϯυ)Λα ϙʔτ

    • Vite ϚΠάϨʔγϣϯػߏ͸ແ͍
  71. GUI ʹΑΔ։ൃࢧԉ • Vue CLI Vue CLI UI (`vue ui`)Λఏڙ

    • Vite GUI͸ແ͍ - Dev Server ্ཱͪ͛ - Ϗϧυ - ϓϥάΠϯΠϯετʔϧ - ઃఆ؅ཧ … ͳͲ
  72. ·ͱΊ

  73. Vue CLI ͱ Vite ͱͰ։ൃʹ͍ͭͯൺֱ • جૅ • ϓϩδΣΫτ࡞੒ •

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

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

    ES Modules ͕࢖͑ΔϞμϯͳϒϥ ΢βͰͷಈ࡞Λ૝ఆ • Dev Server ͷ্ཱ͕ͪΓͱϏϧυͷ଎͞ͷ DX ͸ Vue CLI ΑΓ΋֨ஈ্ʂ • Vue CLI ͷΑ͏ͳखް͍։ൃࢧԉ·Ͱɺ·ͨ४ උͰ͖͍ͯͳ͍͕ɺ࣮ફతͳ։ൃ͸ग़དྷΔʂ
  76. awesome-vite • Vite Ͱ Vue ΞϓϦέʔγϣϯ։ൃͷͨΊ starter & Vite ϓϥάΠϯͷϦετ͕ఏڙ

    ͞Ε͍ͯΔ https://github.com/vitejs/awesome-vite
  77. Vite ࢖͑Δػձ͕͋ͬͨΒ ͥͻ࢖ͬͯߦ͖·͠ΐ͏ʂ

  78. Vue CLI ͸ ࠓޙͲ͏ͳΔʁ

  79. VueConf US 2021 ΑΓ • Vue CLI ͸Ҿ͖ଓ͖αϙʔτ͢Δʂ https://docs.google.com/presentation/d/1Lu1X6dyofyWqE6lpWsdUAkHMWm9pB6A9bs187iIUin4/edit#slide=id.gc0eae89b1f_0_122

  80. Vue CLI ࠷৽ϩʔυϚοϓ • ݱࡏ v5 ։ൃத https://github.com/vuejs/vue-cli/issues/6064 v5 Ͱ͸Ϗϧυʹ

    Vite Λ࢖͏ࣄ͕Ͱ͖Δ Α͏ʹͳΔ༧ఆ
  81. Thank you very much! https://github.com/sponsors/kazupon