Vue with Vite - Speaker Deck

Vue with Vite

by kazupon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ຊ୊ʹೖΔલʹ…

Slide 6

Slide 6 text

Vite

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ਖ਼ࣜϦϦʔεલͷ͔Β Կ͕৽͘͠ͳͬͨͷ͔

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ຊ୊

Slide 22

Slide 22 text

جຊฤ

Slide 23

Slide 23 text

ϓϩδΣΫτ ࡞੒ Vue CLI

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ϓϩδΣΫτ ࡞੒ Vite

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Dev Server ্ཱͪ͛ Vue CLI

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Dev Server ্ཱͪ͛ Vite

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Ϗϧυ Vue CLI

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Ϗϧυ Vite

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Ԡ༻ฤ

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

։ൃ؀ڥઃఆ Vue CLI

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

։ൃ؀ڥઃఆ Vite

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Vite ϓϥάΠϯͷઃఆ • `plugins` Φϓγϣϯ Ͱ import ͨ͠ Vite ϓϥάΠϯؔ਺ͷΦ ϓγϣϯͰࢦఆ͕ඞ ཁ • Vue CLI ͷΑ͏ͳί ϚϯυͰ Vite ϓϥά ΠϯͰ͖ͳ͍ͨΊɺ ࣗ෼Ͱઃఆ͕ඞཁ

Slide 61

Slide 61 text

ϥΠϒϥϦ Ϗϧυ Vue CLI

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

ϥΠϒϥϦ Ϗϧυ Vite

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

ͦͷଞ

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

·ͱΊ

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Vue CLI ͸ ࠓޙͲ͏ͳΔʁ

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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