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.6k
Vue with Vite
kazupon
May 12, 2021
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
480
Vapor Revolution
kazupon
3
3.4k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
State of Vue I18n
kazupon
3
620
Other Decks in Programming
See All in Programming
Datadog RUM 本番導入までの道
shinter61
1
290
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
960
Effect の双対、Coeffect
yukikurage
5
1.4k
エラーって何種類あるの?
kajitack
5
160
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
130
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
230
Benchmark
sysong
0
210
生成AIで日々のエラー調査を進めたい
yuyaabo
0
600
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
260
SODA - FACT BOOK
sodainc
1
1k
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
1
550
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.5k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Done Done
chrislema
184
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Adopting Sorbet at Scale
ufuk
77
9.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making Projects Easy
brettharned
116
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
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