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
Vapor Revolution
kazupon
2
3.1k
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.6k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
State of Vue I18n
kazupon
3
580
まちにまった Vue.js 3
kazupon
14
5.6k
Other Decks in Programming
See All in Programming
AHC041解説
terryu16
0
590
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Practical Orchestrator
shlominoach
186
10k
What's in a price? How to price your products and services
michaelherold
244
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing for Performance
lara
604
68k
Embracing the Ebb and Flow
colly
84
4.6k
Visualization
eitanlees
146
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Bash Introduction
62gerente
610
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
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