Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue with Vite
Search
kazupon
May 12, 2021
Programming
2
2.5k
Vue with Vite
kazupon
May 12, 2021
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
410
Vapor Revolution
kazupon
3
3.3k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.2k
Vue.jsエコシステム動向2023
kazupon
17
7.7k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
State of Vue I18n
kazupon
3
610
Other Decks in Programming
See All in Programming
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
810
ミリしらMCP勉強会
watany
4
760
Sharing features among Android applications: experience feedback
jbvincey
0
110
ComposeでWebアプリを作る技術
tbsten
0
110
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3k
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
280
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
130
SQL Server ベクトル検索
odashinsuke
0
180
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
DataStoreをテストする
mkeeda
0
290
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
820
Featured
See All Featured
Practical Orchestrator
shlominoach
186
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Into the Great Unknown - MozCon
thekraken
37
1.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Become a Pro
speakerdeck
PRO
27
5.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
It's Worth the Effort
3n
184
28k
Transcript
Vue with Vite Line Developer Meetup #72 Vue.js 2021.05.12 @kazupon
PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group
Organizer Creator of Vue I18n & Intlify @kazu_pon kazupon kazupon
ࠓ͢͜ͱ
ࠓ͢͜ͱ • ࠷ۙϦϦʔε͞Εͨ 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 Ҏ֎ͷओཁϒϥβͰ ES Modules ͕͑Δঢ়گ https://caniuse.com/es6-module
ϒϥβपΓΛऔΓר͘ঢ়گ • IE11 ɺEOL Λ ͨͣʹओཁ αʔϏεɺͦ͠ ͯ OSS ք۾α
ϙʔτଧͪΔ ྲྀΕ https://github.com/vuejs/rfcs/discussions/296 Vite ͜͏ͨ͠ঢ়گΛ ݟਾ͑ͯ࡞ΒΕͨ ະདྷࢤͳπʔϧʂ
ਖ਼ࣜϦϦʔεલͷ͔Β Կ͕৽͘͠ͳͬͨͷ͔
ϑϨʔϜϫʔΫʹґଘ͠ͳ͘ͳͬͨ • 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-tsc Vue ͚ʹ TypeScript ͷܕνΣοΫ͕ಛ Խ͞Εͨ CLIπʔϧ
https://github.com/johnsoncodehk/vue-tsc template ܕνΣοΫΛͯ͘͠Δʂ
vue-tsc ͷ։ൃऀ Volar ͷ։ൃऀ • Volar Vue 3 ͚ͷ
VSCode ֦ு • Template ͷܕνΣοΫͯ͘͠ΕΔ https://github.com/johnsoncodehk/volar
Vite ͚ͷઃఆϑΝΠϧ͕࡞͞ΕΔ Vite Λͬͨ։ൃͰඞཁ࠷ ݶͷ༰ΛηοτΞοϓ
Dev Server ্ཱͪ͛ Vue CLI
`serve` Λ࣮ߦ͢Δ • ίϚϯυͷ࣮ଶ `vue-cli-service` ͷ `serve` • ࣮ߦ͢Δͱ
όϯυϧͨ͠ޙʹ ϩʔΧϧ্ʹ Dev Server ͕ىಈ͢Δ
Dev Server ্ཱͪ͛ Vite
`dev` Λ࣮ߦ͢Δ • ίϚϯυͷ࣮ଶ ɺ`vite` • ࣮ߦ͢Δͱ όϯυϧ͠ͳ͍ ͰϩʔΧϧ্ʹ Dev
Server ͕ى ಈ͢Δ ͙͢ʹ։ൃ͕Ͱ͖Δ DX ͕Α͍ʂ
Ϗϧυ Vue CLI
`build` Λ࣮ߦ͢Δ • npm scripts ͷ `build` ͔Β`vue-cli-service build` ͕࣮ߦ͞ΕΔ
όϯυϧ͞Εͨίʔυ • 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 `vue inspect` Λ༻ҙ͍ͯ͠Δ
Vue CLI ϓϥάΠϯͷઃఆ • `pluginOptions` ʹઃఆͰ͖ͯ vue.config.jsͰҰ ׅཧ • ઃఆେ
Vue CLIϓϥάΠϯΠ ϯετʔϧ࣌ʹࣗ ಈతʹߦΘΕΔ 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
Ϗϧυ͞Εͨίʔυ • ग़ྗ͞ΕΔܗࣜͱͯ͠σϑΥϧτ ES Modules ͱ UMD ͷΈ • CommonJS
ͱ IIFE ܗࣜ `build.lib.formats` ΦϓγϣϯͰରԠՄೳ
ͦͷଞ
όοΫΤϯυ࿈ܞ • Vue CLI • ઃఆ `devServer.proxy`ΦϓγϣϯͰϓϩΩγΛͬͯ࿈ܞ Ͱ͖Δ • Vite
• ઃఆ `server.proxy`ΦϓγϣϯͰϓϩΩγͰ͖Δ • ϚχϑΣετػߏ͏ͱόοΫΤϯυͱVite͕γʔϜϨε ʹͰ͖Δ • ༗໊ॴ Vite ϓϥάΠϯೖΕΔ͚ͩ e.g. Rails Vite Ruby https://github.com/ElMassimo/vite_ruby
ϓϥάΠϯΞοϓάϨʔυ • Vue CLI `vue upgrade` Ͱ Vue CLI ؔ࿈ͷύοέʔ
δΛΞοϓάϨʔυͰ͖Δ • Vite ύοέʔδϚωʔδϟʔ͕༻ҙ͍ͯ͠Δ ͷͰΞοϓάϨʔυ e.g. `npm upgrade`
ϓϥάΠϯϚΠάϨʔγϣϯ • Vue CLI Vue CLI ϓϥάΠϯͷϚΠάϨʔγϣϯػ ߏ(APIͱ`vue migration`ίϚϯυ)Λα ϙʔτ
• Vite ϚΠάϨʔγϣϯػߏແ͍
GUI ʹΑΔ։ൃࢧԉ • Vue CLI Vue CLI UI (`vue ui`)Λఏڙ
• Vite GUIແ͍ - 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/6064 v5 ͰϏϧυʹ
Vite Λ͏ࣄ͕Ͱ͖Δ Α͏ʹͳΔ༧ఆ
Thank you very much! https://github.com/sponsors/kazupon