Vue with Vite

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