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
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.5k
Vue & Vite Rustify
kazupon
4
2.1k
Vue.jsエコシステム動向2023
kazupon
17
7.4k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
State of Vue I18n
kazupon
3
540
まちにまった Vue.js 3
kazupon
14
5.5k
Native-ESM powered web dev build tool
kazupon
5
1.6k
Other Decks in Programming
See All in Programming
Synchronizationを支える技術
s_shimotori
1
150
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
Identifying User Idenity
moro
6
7.8k
Tuning GraphQL on Rails
pyama86
2
1k
qmuntal/stateless のススメ
sgash708
0
120
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
990
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
offers_20241022_imakiire.pdf
imakurusu
2
360
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Docker and Python
trallard
40
3.1k
Teambox: Starting and Learning
jrom
132
8.7k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
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