$30 off During Our Annual Pro Sale. View Details »

Vue with Vite

Vue with Vite

kazupon

May 12, 2021
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

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

    View Slide

  2. PLAID, inc.
    Vue.js Core Team Member
    Vue.js Japan User Group Organizer
    Creator of Vue I18n & Intlify
    @kazu_pon kazupon
    kazupon

    View Slide

  3. ࠓ೔࿩͢͜ͱ

    View Slide

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

    View Slide

  5. ຊ୊ʹೖΔલʹ…

    View Slide

  6. Vite

    View Slide

  7. Vite
    • ࡞ऀ:
    Evan You
    • ໊લ:
    pronounced `/vit/`
    • GitHub ϨϙδτϦ:
    https://vitejs/vite

    View Slide

  8. Vite ͷಛ௃
    https://github.com/vuejs-jp/vite-docs-ja

    View Slide

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

    View Slide

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

    View Slide

  11. ϒϥ΢βपΓΛऔΓר͘ঢ়گ
    • IE11 ͸ɺEOL Λ
    ଴ͨͣʹओཁ
    αʔϏεɺͦ͠
    ͯ OSS ք۾΋α
    ϙʔτଧͪ੾Δ
    ྲྀΕ
    https://github.com/vuejs/rfcs/discussions/296
    Vite ͸͜͏ͨ͠ঢ়گΛ
    ݟਾ͑ͯ࡞ΒΕͨ
    ະདྷࢤ޲ͳπʔϧʂ

    View Slide

  12. ਖ਼ࣜϦϦʔεલͷ͔Β
    Կ͕৽͘͠ͳͬͨͷ͔

    View Slide

  13. ϑϨʔϜϫʔΫʹґଘ͠ͳ͘ͳͬͨ
    • Vite 0.x ͷͱ͖͸ Vue
    ʹಛԽ͍ͯͨ͠
    • Vite 2 ͸θϩ͔Β࠶ઃ
    ܭ
    • Scaffold͢ΔϓϩδΣ
    ΫτςϯϓϨʔτͷΈ
    ͸ެࣜͰఏڙ͢Δ

    View Slide

  14. ৽͍͠ϓϥάΠϯػߏͱAPIͷચ࿅
    • WMR͔ΒӨڹΛड
    ͚ͨϓϥάΠϯػ
    ߏ
    • ϓϥάΠϯ͸
    Rollup ޓ׵ϑοΫ
    + Vite ಠࣗϑοΫ +
    Vite ಠࣗڍಈௐ੔
    https://vite-rollup-plugins.patak.dev/

    View Slide

  15. ৽͍͠ϓϥάΠϯػߏͱAPIͷચ࿅
    • API ΋αʔυύʔςΟπʔϧɺϑϨʔϜ
    ϫʔΫ޲͚ʹ࢖͍΍͍͢ܗʹ
    https://vitejs.dev/guide/api-javascript.html

    View Slide

  16. ESBuildΛ࢖ͬͨPre-Bundling
    • Rollup ͔Β ESBuild
    ʹ
    • ES Modules ϕʔε
    ͳ dev server ͰϘ
    τϧωοΫʹͳͬͯ
    ͍ͨύϑΥʔϚϯε
    Λ10 ʙ100 ഒύ
    ϑΥʔϚϯεվળ
    https://twitter.com/youyuxi/status/1354447126093307905

    View Slide

  17. CSS όϯυϦϯά΋αϙʔτ
    • @import / url() ͷύεΛ Vite ͷϦκϧό
    ʹΑͬͯղܾ
    • url()ύε͸ Vite ͕ࣗಈతʹϦϕʔε
    • JS ͷ code spliting ʹରԠͨ͠ CSS ͷ
    code spliting ͷੜ੒

    View Slide

  18. αʔόαΠυϨϯμϦϯάͷαϙʔτ
    • ES Modules ϕʔεͷαʔόαΠυϨΠϯ
    μϦϯάػߏͷఏڙ
    (ݱ࣌఺Ͱ͸࣮ݧతػೳ)
    • CommonJS ޓ׵ͷґଘؔ܎Λࣗಈతʹ֎
    ෦Խ

    View Slide

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

    View Slide

  20. ͦͷଞͷࡉ͔͍มߋ
    • dev-server ͷ back-end ͷมߋ
    • koa ͔Β connect ΁
    • Vite ࣗମ΋όϯυϧ͍ͯ͠Δ
    • ґଘύοέʔδ͸ͨͬͨͷ 4 ͭʂ

    View Slide

  21. ຊ୊

    View Slide

  22. جຊฤ

    View Slide

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

    View Slide

  24. ηοτΞοϓ
    • Vue CLI ΛΠϯε
    τʔϧ͔ͯ͠Β
    `vue create` ίϚϯ
    υΛ࣮ߦ͢Δ
    • ࣮ߦޙɺର࿩ܗࣜͰ
    ඞཁͳπʔϧΛબ୒
    ͢Δ͜ͱͰϓϩδΣ
    Ϋτ͕࡞੒͞ΕΔ

    View Slide

  25. ηοτΞοϓ
    • ηοτΞοϓ࣌ʹɺύοέʔδϚωʔδϟ
    ͷΠϯετʔϧ΋࣮ߦͯ͘͠ΕΔ

    View Slide

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

    View Slide

  27. ϓϩδΣΫτ
    ࡞੒
    Vite

    View Slide

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

    View Slide

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

    View Slide

  30. ηοτΞοϓͰ͖Δ Vue όʔδϣϯ
    • σϑΥϧτ Vue 3 ޲͚ͷϓϩδΣΫτ
    • Vue 2 ޲͚͸Ұ౓ηοτΞοϓޙɺ`vite-
    plugin-vue2` ΛΠϯετʔϧ͢Δ͜ͱͰՄ

    https://github.com/underfin/vite-plugin-vue2

    View Slide

  31. TypeScript ޲͚ͷηοτΞοϓ
    • vue-tsc
    Vue ޲͚ʹ TypeScript ͷܕνΣοΫ͕ಛ
    Խ͞Εͨ CLIπʔϧ
    https://github.com/johnsoncodehk/vue-tsc
    template ΋ܕνΣοΫΛͯ͘͠Δʂ

    View Slide

  32. vue-tsc ͷ։ൃऀ͸ Volar ͷ։ൃऀ
    • Volar ͸ Vue 3 ޲͚ͷ VSCode ֦ு
    • Template ͷܕνΣοΫ΋ͯ͘͠ΕΔ
    https://github.com/johnsoncodehk/volar

    View Slide

  33. Vite ޲͚ͷઃఆϑΝΠϧ͕࡞੒͞ΕΔ
    Vite Λ࢖ͬͨ։ൃͰඞཁ࠷௿
    ݶͷ಺༰ΛηοτΞοϓ

    View Slide

  34. Dev Server
    ্ཱͪ͛
    Vue CLI

    View Slide

  35. `serve` Λ࣮ߦ͢Δ
    • ίϚϯυͷ࣮ଶ
    ͸ `vue-cli-service`
    ͷ `serve`
    • ࣮ߦ͢Δͱ
    όϯυϧͨ͠ޙʹ
    ϩʔΧϧ্ʹ Dev
    Server ͕ىಈ͢Δ

    View Slide

  36. Dev Server
    ্ཱͪ͛
    Vite

    View Slide

  37. `dev` Λ࣮ߦ͢Δ
    • ίϚϯυͷ࣮ଶ
    ͸ɺ`vite`
    • ࣮ߦ͢Δͱ
    όϯυϧ͠ͳ͍
    ͰϩʔΧϧ্ʹ
    Dev Server ͕ى
    ಈ͢Δ
    ͙͢ʹ։ൃ͕Ͱ͖Δ
    DX ͕Α͍ʂ

    View Slide

  38. Ϗϧυ
    Vue CLI

    View Slide

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

    View Slide

  40. όϯυϧ͞Εͨίʔυ
    • ES2015 Λαϙʔτ͠ͳ͍ϒϥ΢βͰͷಈ
    ࡞Λ૝ఆͨ͠ίʔυʹɺσϑΥϧτͰτ
    ϥϯεύΠϧ͞ΕΔ
    • ES2015͕αϙʔτ͞Εͨ؀ڥͷΈʹͨ͠
    ͍৔߹͸ɺ`--modern` Φϓγϣϯͷࢦఆ͕
    ඞཁ
    https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode

    View Slide

  41. Ϗϧυ
    Vite

    View Slide

  42. `build` Λ࣮ߦ͢Δ
    • npm scripts ͷ `build` ͔Β`vite build` ͕࣮
    ߦ͞ΕΔ
    Ϗϧυ͸ߴ଎ʂ

    View Slide

  43. TypeScript ޲͚ϓϩδΣΫτͰ͸…
    • package.json ʹ͸ҎԼ͕ઃఆ͞Ε͍ͯΔ
    ͨΊɺܕνΣοΫ -> ϏϧυͱͳΔ
    `vue-tsc --noEmit && vite build`
    ܕνΣοΫ͞Ε͍ͯΔͷͰݎ࿚ͳΞϓϦʹͳΔʂ
    (஫ҙ: Ϗϧυ࣌ͷܕνΣοΫ͸෼཭͞ΕΔՄೳੑ΋͋Γ)

    View Slide

  44. όϯυϧ͞Εͨίʔυ
    • σϑΥϧτ ES2015 Ҏ্Λαϙʔτͨ͠
    ίʔυʹτϥϯεύΠϧ͞ΕΔ
    • ϨΨγʔͳϒϥ΢β্Ͱಈ࡞ͤ͞ΔͨΊ
    ʹ͸ɺެࣜViteϓϥάΠϯ `@vitejs/plugin-
    legacy`͕ඞཁ

    View Slide

  45. Ԡ༻ฤ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. ։ൃ؀ڥઃఆ
    Vue CLI

    View Slide

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

    View Slide

  54. ϏϧυपΓͷઃఆ
    • ҎԼͷ I/F Ͱ
    webpack.config ૬౰͕Մೳ
    - configureWebpack
    - chainWebpack
    • ύϑΥʔϚϯε࠷దԽͱ
    ͍ͬͨڽͬͨόϯυϦϯά
    ઃఆ͢Δʹ͸ɺVue CLI ଆ
    ͷ webpack ͷઃఆΛཧղ
    ͢Δඞཁ͕͋Γ
    • ͦͷͨΊ Vue CLI ͸ `vue
    inspect` Λ༻ҙ͍ͯ͠Δ

    View Slide

  55. Vue CLI ϓϥάΠϯͷઃఆ
    • `pluginOptions`
    ʹઃఆͰ͖ͯ
    vue.config.jsͰҰ
    ׅ؅ཧ
    • ઃఆ͸େ఍ Vue
    CLIϓϥάΠϯΠ
    ϯετʔϧ࣌ʹࣗ
    ಈతʹߦΘΕΔ
    https://cli.vuejs.org/config/#pluginoptions

    View Slide

  56. ։ൃ؀ڥઃఆ
    Vite

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. Vite ϓϥάΠϯͷઃఆ
    • `plugins` Φϓγϣϯ
    Ͱ import ͨ͠ Vite
    ϓϥάΠϯؔ਺ͷΦ
    ϓγϣϯͰࢦఆ͕ඞ

    • Vue CLI ͷΑ͏ͳί
    ϚϯυͰ Vite ϓϥά
    ΠϯͰ͖ͳ͍ͨΊɺ
    ࣗ෼Ͱઃఆ͕ඞཁ

    View Slide

  61. ϥΠϒϥϦ
    Ϗϧυ
    Vue CLI

    View Slide

  62. `--target` ΦϓγϣϯͰग़དྷΔ
    • Vue CLI ͷϓϩδΣΫτΛଞͷΞϓϦέʔ
    γϣϯͰར༻Ͱ͖ΔϥΠϒϥϦͱͯ͠Ϗ
    ϧυͰ͖Δ
    • Web Components Ϗϧυ͕Ͱ͖Δ
    https://cli.vuejs.org/guide/build-targets.html#build-targets

    View Slide

  63. Ϗϧυ͞Εͨίʔυ
    • ग़ྗ͞ΕΔܗࣜͱͯ͠͸ CommonJS ͱ
    UMD ͷΈ
    • ES Modules ܗࣜ͸ग़ྗͰ͖ͳ͍

    View Slide

  64. ϥΠϒϥϦ
    Ϗϧυ
    Vite

    View Slide

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

    View Slide

  66. Ϗϧυ͞Εͨίʔυ
    • ग़ྗ͞ΕΔܗࣜͱͯ͠͸σϑΥϧτ ES
    Modules ͱ UMD ͷΈ
    • CommonJS ͱ IIFE ܗࣜ΋
    `build.lib.formats` ΦϓγϣϯͰରԠՄೳ

    View Slide

  67. ͦͷଞ

    View Slide

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

    View Slide

  69. ϓϥάΠϯΞοϓάϨʔυ
    • Vue CLI
    `vue upgrade` Ͱ Vue CLI ؔ࿈ͷύοέʔ
    δΛΞοϓάϨʔυͰ͖Δ
    • Vite
    ύοέʔδϚωʔδϟʔ͕༻ҙ͍ͯ͠Δ
    ΋ͷͰΞοϓάϨʔυ
    e.g. `npm upgrade`

    View Slide

  70. ϓϥάΠϯϚΠάϨʔγϣϯ
    • Vue CLI
    Vue CLI ϓϥάΠϯͷϚΠάϨʔγϣϯػ
    ߏ(APIͱ`vue migration`ίϚϯυ)Λα
    ϙʔτ
    • Vite
    ϚΠάϨʔγϣϯػߏ͸ແ͍

    View Slide

  71. GUI ʹΑΔ։ൃࢧԉ
    • Vue CLI
    Vue CLI UI (`vue ui`)Λఏڙ
    • Vite
    GUI͸ແ͍
    - Dev Server ্ཱͪ͛
    - Ϗϧυ
    - ϓϥάΠϯΠϯετʔϧ
    - ઃఆ؅ཧ
    … ͳͲ

    View Slide

  72. ·ͱΊ

    View Slide

  73. Vue CLI ͱ Vite ͱͰ։ൃʹ͍ͭͯൺֱ
    • جૅ
    • ϓϩδΣΫτ࡞੒
    • Dev Server ্ཱͪ͛
    • Ϗϧυ
    • Ԡ༻
    • ϓϥάΠϯΠϯετʔϧ
    • ։ൃ؀ڥઃఆ
    • ϥΠϒϥϦϏϧυ
    • ͦͷଞ
    • όοΫΤϯυ࿈ܞ
    • ϓϥάΠϯΞοϓάϨʔυ
    • ϓϥάΠϯϚΠάϨʔγϣϯ
    • GUI ʹΑΔ։ൃࢧԉ

    View Slide

  74. Vue CLI ͸…
    • ݱ࣌఺Ͱ͸ Vue 2 ޲͚
    • ES2015 & ES Modules ͕࢖͑ͳ͍ϨΨ
    γʔͳϒϥ΢βͰͷಈ࡞Λ૝ఆ
    • Vue CLI ͕ੜ·Εͨഎܠࣄ৘͔Β։ൃࢧ
    ԉ͕खް͍

    View Slide

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

    View Slide

  76. awesome-vite
    • Vite Ͱ Vue ΞϓϦέʔγϣϯ։ൃͷͨΊ
    starter & Vite ϓϥάΠϯͷϦετ͕ఏڙ
    ͞Ε͍ͯΔ
    https://github.com/vitejs/awesome-vite

    View Slide

  77. Vite ࢖͑Δػձ͕͋ͬͨΒ
    ͥͻ࢖ͬͯߦ͖·͠ΐ͏ʂ

    View Slide

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

    View Slide

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

    View Slide

  80. Vue CLI ࠷৽ϩʔυϚοϓ
    • ݱࡏ v5 ։ൃத
    https://github.com/vuejs/vue-cli/issues/6064
    v5 Ͱ͸Ϗϧυʹ
    Vite Λ࢖͏ࣄ͕Ͱ͖Δ
    Α͏ʹͳΔ༧ఆ

    View Slide

  81. Thank you very much!
    https://github.com/sponsors/kazupon

    View Slide