Vue with ViteLine Developer Meetup #72Vue.js2021.05.12@kazupon
View Slide
PLAID, inc.Vue.js Core Team MemberVue.js Japan User Group OrganizerCreator of Vue I18n & Intlify@kazu_pon kazuponkazupon
ࠓ͢͜ͱ
ࠓ͢͜ͱ• ࠷ۙϦϦʔε͞Εͨ Vite ΛͬͨVue ΞϓϦέʔγϣϯͷ։ൃʹ͍ͭͯ
ຊʹೖΔલʹ…
Vite
Vite• ࡞ऀ:Evan You• ໊લ:pronounced `/vit/`• GitHub ϨϙδτϦ:https://vitejs/vite
Vite ͷಛhttps://github.com/vuejs-jp/vite-docs-ja
Vite ͷຊ࣭తͳಛ• ES Modules ͕ಈ࡞͢ΔϞμϯͳϒϥβ͚Λఆͨ͠ϑϩϯτΤϯυ։ൃπʔϧ• طଘͷπʔϧ: WebPack ϕʔε• Vite: Rollup ϕʔε
ϒϥβपΓΛऔΓר͘ঢ়گ• IE 11 Ҏ֎ͷओཁϒϥβͰ ESModules ͕͑Δঢ়گhttps://caniuse.com/es6-module
ϒϥβपΓΛऔΓר͘ঢ়گ• IE11 ɺEOL ΛͨͣʹओཁαʔϏεɺͦͯ͠ OSS ք۾αϙʔτଧͪΔྲྀΕhttps://github.com/vuejs/rfcs/discussions/296Vite ͜͏ͨ͠ঢ়گΛݟਾ͑ͯ࡞ΒΕͨະདྷࢤͳπʔϧʂ
ਖ਼ࣜϦϦʔεલͷ͔ΒԿ͕৽͘͠ͳͬͨͷ͔
ϑϨʔϜϫʔΫʹґଘ͠ͳ͘ͳͬͨ• Vite 0.x ͷͱ͖ VueʹಛԽ͍ͯͨ͠• Vite 2 θϩ͔Β࠶ઃܭ• Scaffold͢ΔϓϩδΣΫτςϯϓϨʔτͷΈެࣜͰఏڙ͢Δ
৽͍͠ϓϥάΠϯػߏͱAPIͷચ࿅• WMR͔ΒӨڹΛड͚ͨϓϥάΠϯػߏ• ϓϥάΠϯRollup ޓϑοΫ+ Vite ಠࣗϑοΫ +Vite ಠࣗڍಈௐhttps://vite-rollup-plugins.patak.dev/
৽͍͠ϓϥάΠϯػߏͱAPIͷચ࿅• API αʔυύʔςΟπʔϧɺϑϨʔϜϫʔΫ͚ʹ͍͍͢ܗʹhttps://vitejs.dev/guide/api-javascript.html
ESBuildΛͬͨPre-Bundling• Rollup ͔Β ESBuildʹ• ES Modules ϕʔεͳ dev server ͰϘτϧωοΫʹͳ͍ͬͯͨύϑΥʔϚϯεΛ10 ʙ100 ഒύϑΥʔϚϯεվળhttps://twitter.com/youyuxi/status/1354447126093307905
CSS όϯυϦϯάαϙʔτ• @import / url() ͷύεΛ Vite ͷϦκϧόʹΑͬͯղܾ• url()ύε Vite ͕ࣗಈతʹϦϕʔε• JS ͷ code spliting ʹରԠͨ͠ CSS ͷcode spliting ͷੜ
αʔόαΠυϨϯμϦϯάͷαϙʔτ• ES Modules ϕʔεͷαʔόαΠυϨΠϯμϦϯάػߏͷఏڙ(ݱ࣌Ͱ࣮ݧతػೳ)• CommonJS ޓͷґଘؔΛࣗಈతʹ֎෦Խ
ϨΨγʔϒϥβ͚ͷOpt-inఏڙ• ϞμϯϒϥβҎ֎Ͱಈ࡞͢ΔΑ͏ެࣜViteϓϥάΠϯ(`@vitejs/plugin-legacy`)Λఏڙhttps://github.com/vitejs/vite/tree/main/packages/plugin-legacy
ͦͷଞͷࡉ͔͍มߋ• dev-server ͷ back-end ͷมߋ• koa ͔Β connect • Vite ࣗମόϯυϧ͍ͯ͠Δ• ґଘύοέʔδͨͬͨͷ 4 ͭʂ
ຊ
جຊฤ
ϓϩδΣΫτ࡞Vue CLI
ηοτΞοϓ• Vue CLI ΛΠϯετʔϧ͔ͯ͠Β`vue create` ίϚϯυΛ࣮ߦ͢Δ• ࣮ߦޙɺରܗࣜͰඞཁͳπʔϧΛબ͢Δ͜ͱͰϓϩδΣΫτ͕࡞͞ΕΔ
ηοτΞοϓ• ηοτΞοϓ࣌ʹɺύοέʔδϚωʔδϟͷΠϯετʔϧ࣮ߦͯ͘͠ΕΔ
ηοτΞοϓͰ͖Δ Vue όʔδϣϯ• σϑΥϧτ Vue 2 ͚ϓϩδΣΫτ• Vue 3 ͚ͷϓϩδΣΫτ·ͩ Preview
ϓϩδΣΫτ࡞Vite
ηοτΞοϓ• `npm init @vitejs/app` ͔Β࡞Ͱ͖Δ• ίϚϯυ࣮ߦޙɺϑϨʔϜϫʔΫͱ༻ݴޠΛબ͢ΔͱϓϩδΣΫτ͕ग़དྷ্͕Δ
ηοτΞοϓ• ηοτΞοϓ࣌ʹɺύοέʔδϚωʔδϟͷΠϯετʔϧ࣮ߦͯ͘͠Εͳ͍ʂ• ͜ͷͨΊɺࣗͰϓϩδΣΫτσΟϨΫτϦͰΠϯετʔϧ͕ඞཁΠϯετʔϧΛͨͳͯ͘Α͍ͨΊɺҙࣝతʹ࣍ͷ࡞ۀʹҠΕΔͨΊɺ։ൃ࡞ۀͷDX͕ྑ͍
ηοτΞοϓͰ͖Δ Vue όʔδϣϯ• σϑΥϧτ Vue 3 ͚ͷϓϩδΣΫτ• Vue 2 ͚ҰηοτΞοϓޙɺ`vite-plugin-vue2` ΛΠϯετʔϧ͢Δ͜ͱͰՄೳhttps://github.com/underfin/vite-plugin-vue2
TypeScript ͚ͷηοτΞοϓ• vue-tscVue ͚ʹ TypeScript ͷܕνΣοΫ͕ಛԽ͞Εͨ CLIπʔϧhttps://github.com/johnsoncodehk/vue-tsctemplate ܕνΣοΫΛͯ͘͠Δʂ
vue-tsc ͷ։ൃऀ Volar ͷ։ൃऀ• Volar Vue 3 ͚ͷ VSCode ֦ு• Template ͷܕνΣοΫͯ͘͠ΕΔhttps://github.com/johnsoncodehk/volar
Vite ͚ͷઃఆϑΝΠϧ͕࡞͞ΕΔVite Λͬͨ։ൃͰඞཁ࠷ݶͷ༰ΛηοτΞοϓ
Dev Server্ཱͪ͛Vue CLI
`serve` Λ࣮ߦ͢Δ• ίϚϯυͷ࣮ଶ `vue-cli-service`ͷ `serve`• ࣮ߦ͢Δͱόϯυϧͨ͠ޙʹϩʔΧϧ্ʹ DevServer ͕ىಈ͢Δ
Dev Server্ཱͪ͛Vite
`dev` Λ࣮ߦ͢Δ• ίϚϯυͷ࣮ଶɺ`vite`• ࣮ߦ͢Δͱόϯυϧ͠ͳ͍ͰϩʔΧϧ্ʹDev Server ͕ىಈ͢Δ͙͢ʹ։ൃ͕Ͱ͖ΔDX ͕Α͍ʂ
ϏϧυVue CLI
`build` Λ࣮ߦ͢Δ• npm scripts ͷ `build` ͔Β`vue-cli-servicebuild` ͕࣮ߦ͞ΕΔ
όϯυϧ͞Εͨίʔυ• ES2015 Λαϙʔτ͠ͳ͍ϒϥβͰͷಈ࡞Λఆͨ͠ίʔυʹɺσϑΥϧτͰτϥϯεύΠϧ͞ΕΔ• ES2015͕αϙʔτ͞ΕͨڥͷΈʹ͍ͨ͠߹ɺ`--modern` Φϓγϣϯͷࢦఆ͕ඞཁhttps://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
ϏϧυVite
`build` Λ࣮ߦ͢Δ• npm scripts ͷ `build` ͔Β`vite build` ͕࣮ߦ͞ΕΔϏϧυߴʂ
TypeScript ͚ϓϩδΣΫτͰ…• package.json ʹҎԼ͕ઃఆ͞Ε͍ͯΔͨΊɺܕνΣοΫ -> ϏϧυͱͳΔ`vue-tsc --noEmit && vite build`ܕνΣοΫ͞Ε͍ͯΔͷͰݎ࿚ͳΞϓϦʹͳΔʂ(ҙ: Ϗϧυ࣌ͷܕνΣοΫ͞ΕΔՄೳੑ͋Γ)
όϯυϧ͞Εͨίʔυ• σϑΥϧτ ES2015 Ҏ্Λαϙʔτͨ͠ίʔυʹτϥϯεύΠϧ͞ΕΔ• ϨΨγʔͳϒϥβ্Ͱಈ࡞ͤ͞ΔͨΊʹɺެࣜViteϓϥάΠϯ `@vitejs/plugin-legacy`͕ඞཁ
Ԡ༻ฤ
VueϓϥάΠϯΠϯετʔϧVue CLI
`vue add` ίϚϯυܦ༝ͰΠϯετʔϧVueϓϥάΠϯ͕ಈ࡞ʹඞཁͳڥ & ґଘύοέʔδΛVue CLIϓϥάΠϯܦ༝͚ͩͰϓϩδΣΫτʹηοτΞοϓ
VueϓϥάΠϯΠϯετʔϧVite
ύοέʔδϚωʔδϟܦ༝ͰΠϯετʔϧ• VueϓϥάΠϯɺVite ܦ༝Ͱͳ͘௨ৗͷύοέʔδϚωʔδϟͰΠϯετʔϧ
։ൃΛ͞Βʹศར͢ΔͨΊʹ…• Vite ϓϥάΠϯΛύοέʔδϚωʔδϟʔͰ devDeps ͱͯ͠Πϯετʔϧ͢Δ
Πϯετʔϧޙɺઃఆ͕ඞཁ• Vite ͷઃఆϑΝΠϧʹΠϯετʔϧͨ͠Vite ϓϥάΠϯΛઃఆ͢Δඞཁ͕͋Δ
։ൃڥઃఆVue CLI
vue.config.js Ͱઃఆ͢Δ• ϏϧυɺDev SeverɺCSSɺPWAͳͲͷઃఆ͜ͷϑΝΠϧͰߦ͏https://cli.vuejs.org/config/#vue-config-js
ϏϧυपΓͷઃఆ• ҎԼͷ I/F Ͱwebpack.config ૬͕Մೳ- configureWebpack- chainWebpack• ύϑΥʔϚϯε࠷దԽͱ͍ͬͨڽͬͨόϯυϦϯάઃఆ͢ΔʹɺVue CLI ଆͷ webpack ͷઃఆΛཧղ͢Δඞཁ͕͋Γ• ͦͷͨΊ Vue CLI `vueinspect` Λ༻ҙ͍ͯ͠Δ
Vue CLI ϓϥάΠϯͷઃఆ• `pluginOptions`ʹઃఆͰ͖ͯvue.config.jsͰҰׅཧ• ઃఆେ VueCLIϓϥάΠϯΠϯετʔϧ࣌ʹࣗಈతʹߦΘΕΔhttps://cli.vuejs.org/config/#pluginoptions
։ൃڥઃఆVite
vite.config.[tj]s Ͱઃఆ͢Δ• Vue CLI ͱҧ͍ɺϏϧυɺDev ServerपΓͷόϯυϥʹಛԽ͞Εͨઃఆ͕Մೳhttps://vitejs.dev/config/
ϏϧυपΓͷઃఆ• `build` ΦϓγϣϯͰઃఆՄೳ• Rollup ϕʔεͳͷͰɺ`build.rollupOptions` Ͱࡉ͔͍ઃఆ͕Ͱ͖Δ
ϏϧυपΓͷઃఆ• Vite Rollup ޓόϯυϥͳͷͰϏϧυपΓࠞཚ͢ΔΑ͏ͳσϑΥϧτઃఆΛՃ͍͑ͯͳ͍• ͍͘͢͢ΔͨΊͷઃఆ͕Ճ͑ΒΕ͍ͯΔ͙Β͍ (e.g. JSONϑΝΠϧ)
Vite ϓϥάΠϯͷઃఆ• `plugins` ΦϓγϣϯͰ import ͨ͠ ViteϓϥάΠϯؔͷΦϓγϣϯͰࢦఆ͕ඞཁ• Vue CLI ͷΑ͏ͳίϚϯυͰ Vite ϓϥάΠϯͰ͖ͳ͍ͨΊɺࣗͰઃఆ͕ඞཁ
ϥΠϒϥϦϏϧυVue CLI
`--target` ΦϓγϣϯͰग़དྷΔ• Vue CLI ͷϓϩδΣΫτΛଞͷΞϓϦέʔγϣϯͰར༻Ͱ͖ΔϥΠϒϥϦͱͯ͠ϏϧυͰ͖Δ• Web Components Ϗϧυ͕Ͱ͖Δhttps://cli.vuejs.org/guide/build-targets.html#build-targets
Ϗϧυ͞Εͨίʔυ• ग़ྗ͞ΕΔܗࣜͱͯ͠ CommonJS ͱUMD ͷΈ• ES Modules ܗࣜग़ྗͰ͖ͳ͍
ϥΠϒϥϦϏϧυVite
Vite ͷઃఆϑΝΠϧͰग़དྷΔ• `build.lib` ΦϓγϣϯͰ Vite ͷϓϩδΣΫτΛϥΠϒϥϦͱͯ͠ϏϧυͰ͖Δhttps://vitejs.dev/guide/build.html#library-mode
Ϗϧυ͞Εͨίʔυ• ग़ྗ͞ΕΔܗࣜͱͯ͠σϑΥϧτ ESModules ͱ UMD ͷΈ• CommonJS ͱ IIFE ܗࣜ`build.lib.formats` ΦϓγϣϯͰରԠՄೳ
ͦͷଞ
όοΫΤϯυ࿈ܞ• Vue CLI• ઃఆ `devServer.proxy`ΦϓγϣϯͰϓϩΩγΛͬͯ࿈ܞͰ͖Δ• Vite• ઃఆ `server.proxy`ΦϓγϣϯͰϓϩΩγͰ͖Δ• ϚχϑΣετػߏ͏ͱόοΫΤϯυͱVite͕γʔϜϨεʹͰ͖Δ• ༗໊ॴ Vite ϓϥάΠϯೖΕΔ͚ͩe.g. Rails Vite Rubyhttps://github.com/ElMassimo/vite_ruby
ϓϥάΠϯΞοϓάϨʔυ• Vue CLI`vue upgrade` Ͱ Vue CLI ؔ࿈ͷύοέʔδΛΞοϓάϨʔυͰ͖Δ• ViteύοέʔδϚωʔδϟʔ͕༻ҙ͍ͯ͠ΔͷͰΞοϓάϨʔυe.g. `npm upgrade`
ϓϥάΠϯϚΠάϨʔγϣϯ• Vue CLIVue CLI ϓϥάΠϯͷϚΠάϨʔγϣϯػߏ(APIͱ`vue migration`ίϚϯυ)Λαϙʔτ• ViteϚΠάϨʔγϣϯػߏແ͍
GUI ʹΑΔ։ൃࢧԉ• Vue CLIVue CLI UI (`vue ui`)Λఏڙ• ViteGUIແ͍- Dev Server ্ཱͪ͛- Ϗϧυ- ϓϥάΠϯΠϯετʔϧ- ઃఆཧ… ͳͲ
·ͱΊ
Vue CLI ͱ Vite ͱͰ։ൃʹ͍ͭͯൺֱ• جૅ• ϓϩδΣΫτ࡞• Dev Server ্ཱͪ͛• Ϗϧυ• Ԡ༻• ϓϥάΠϯΠϯετʔϧ• ։ൃڥઃఆ• ϥΠϒϥϦϏϧυ• ͦͷଞ• όοΫΤϯυ࿈ܞ• ϓϥάΠϯΞοϓάϨʔυ• ϓϥάΠϯϚΠάϨʔγϣϯ• GUI ʹΑΔ։ൃࢧԉ
Vue CLI …• ݱ࣌Ͱ Vue 2 ͚• ES2015 & ES Modules ͕͑ͳ͍ϨΨγʔͳϒϥβͰͷಈ࡞Λఆ• Vue CLI ͕ੜ·Εͨഎܠࣄ͔Β։ൃࢧԉ͕खް͍
Vite …• σϑΥϧτ Vue 3 ͚• ES2015 & ES Modules ͕͑ΔϞμϯͳϒϥβͰͷಈ࡞Λఆ• Dev Server ͷ্ཱ͕ͪΓͱϏϧυͷ͞ͷ DX Vue CLI ΑΓ֨ஈ্ʂ• Vue CLI ͷΑ͏ͳखް͍։ൃࢧԉ·Ͱɺ·ͨ४උͰ͖͍ͯͳ͍͕ɺ࣮ફతͳ։ൃग़དྷΔʂ
awesome-vite• Vite Ͱ Vue ΞϓϦέʔγϣϯ։ൃͷͨΊstarter & Vite ϓϥάΠϯͷϦετ͕ఏڙ͞Ε͍ͯΔhttps://github.com/vitejs/awesome-vite
Vite ͑Δػձ͕͋ͬͨΒͥͻͬͯߦ͖·͠ΐ͏ʂ
Vue CLI ࠓޙͲ͏ͳΔʁ
VueConf US 2021 ΑΓ• Vue CLI Ҿ͖ଓ͖αϙʔτ͢Δʂhttps://docs.google.com/presentation/d/1Lu1X6dyofyWqE6lpWsdUAkHMWm9pB6A9bs187iIUin4/edit#slide=id.gc0eae89b1f_0_122
Vue CLI ࠷৽ϩʔυϚοϓ• ݱࡏ v5 ։ൃதhttps://github.com/vuejs/vue-cli/issues/6064v5 ͰϏϧυʹVite Λ͏ࣄ͕Ͱ͖ΔΑ͏ʹͳΔ༧ఆ
Thank you very much!https://github.com/sponsors/kazupon
kazupon
akkyie
sanfrecce_osaka
katsu8686
takefumiyoshii
minako__ph
chimame
prof18
suzukimar
rakus_dev
masatoshiitoh
bells17
blueswen
trallard
dougneiner
colly
speakerdeck
tenderlove
paulrobertlloyd
reverentgeek
chriscoyier
tammyeverts
chrislema
jonyablonski
sachag