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
400
Vapor Revolution
kazupon
3
3.2k
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
600
Other Decks in Programming
See All in Programming
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
230
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
820
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1.1k
ベクトル検索システムの気持ち
monochromegane
30
8.9k
なぜselectはselectではないのか
taiyow
2
310
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
920
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
340
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
読もう! Android build ドキュメント
andpad
1
240
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
980
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.7k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
RailsConf 2023
tenderlove
29
1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Building Your Own Lightsaber
phodgson
104
6.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
It's Worth the Effort
3n
184
28k
Visualization
eitanlees
146
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
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