Vue with Vite

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