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
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
Search
SAW
January 17, 2025
Programming
1
83
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
v-kansai Meetup #16 の発表資料です。
SAW
January 17, 2025
Tweet
Share
More Decks by SAW
See All by SAW
EditorConfig を使ってみよう
azuki
1
30
Symfony でサクッと作る REST API サーバー
azuki
1
41
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
200
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
100
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
290
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
240
Eloquent で relation を扱う基礎
azuki
0
120
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
94
ブラウザでテキストを読み上げる
azuki
0
150
Other Decks in Programming
See All in Programming
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.9k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Honoとフロントエンドの 型安全性について
yodaka
5
330
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.2k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
チームリードになって変わったこと
isaka1022
0
190
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
120
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
320
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Facilitating Awesome Meetings
lara
51
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Docker and Python
trallard
44
3.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Transcript
7JUFͷ-JCSBSZ.PEFΛͬͯ 7VFͷίϯϙʔωϯτΛϥΠϒϥϦԽ͢Δ WLBOTBJ.FFUVQ 4"8
$(whoami) w ࢯ໊Ճ౻फҰ ࡀ w ϋϯυϧωʔϜ4"8 w 9 چ5XJUUFS
!B[VLJ@FBUFS w ؔͷ*5ΤϯδχΞίϛϡχςΟͷ͔͠୲ ࣗশ w େࡕࡏॅɾѪग़ w ಘҙ8FCΞϓϦέʔγϣϯ։ൃ w 7VF -BSBWFM ΧϨʔುʹೖΕͨϩʔϦΤΛ શ෦͍͘͢ग़͢ͷҙ֎ͱࢸͷۀ ࠓͷ໎ݴ
7JUFͷ-JCSBSZ.PEF w ϓϩδΣΫτΛՄೳͳϥΠϒϥϦ༻ͷܗࣜͰϏϧυ͢ΔͨΊͷઃఆ w OQNSFHJTUSZͳͲʹ͔ͯ͠Βnpm installͰΠϯετʔϧͯ͠ར༻ w vite.config.tsͰϏϧυઃఆΛมߋ w ΤϯτϦϙΠϯτग़ྗܗࣜ
&4.PEVMF$PNNPO+4ͳͲ ͳͲΛઃఆ
vite.config.tsͷઃఆྫ w defineConfig()ͷbuild.libʹઃఆΛՃ w entryΤϯτϦϙΠϯτͱͳΔϑΝΠϧ w +BWB4DSJQU·ͨ5ZQF4DSJQUͷϑΝΠϧύεΛࢦఆ w nameϥΠϒϥϦԽͨ͠ࡍͷάϩʔόϧม໊ w
formatsग़ྗ͢ΔϑΝΠϧܗࣜ w &4.PEVMF6.%ͳͲͷܗࣜΛࢦఆ export default defineConfig({ build: { lib: { entry: resolve(__dirname, 'src/index.ts'), name: 'my-component-library', formats: ['es', 'umd'], }, }, }) vite.config.ts
7VFͷίϯϙʔωϯτΛϥΠϒϥϦԽ w 7VFίϯϙʔωϯτΛΤϯτϦϙΠϯτܦ༝Ͱexport w ϥΠϒϥϦԽ͢ΔରͷίϯϙʔωϯτͷΈΛexport w src/main.tssrc/App.vueίϯϙʔωϯτͷಈ࡞֬ೝ༻ʹ͢ w ϥΠϒϥϦԽͷରʹؚ·ͳ͍
<script setup lang="ts"> defineProps<{ message: string }>(); </script> <template> <div class="card"> {{ message }} </div> </template> src/components/MessageCard.vue // ライブラリ化するコンポーネントのみ export するエントリポイント import MessageCard from './components/MessageCard.vue'; export { MessageCard }; src/index.ts
5ZQF4DSJQUͷܕఆٛΛՃ w σϑΥϧτͰ7JUF͔Β5ZQF4DSJQUͷܕఆٛΛϏϧυʹՃͰ͖ͳ͍ w distҎԼʹܕఆٛϑΝΠϧ *.d.ts ͕ੜ͞Εͳ͍ w WJUFQMVHJOEUTͱ͍͏ϓϥάΠϯΛར༻͢Δ͜ͱͰܕఆٛΛՃՄೳ w
vite.config.tsʹϓϥάΠϯͷઃఆΛՃ w Ϗϧυ͢ΔͱdistҎԼʹ*.d.ts͕ੜ͞ΕΔ
WJUFQMVHJOEUTͷઃఆྫ w defineConfig()ͷpluginϓϩύςΟʹઃఆΛՃ w tsconfigPathtsconfig.jsonͷύεΛࢦఆ w excludeϏϧυͷର֎ͷϑΝΠϧΛࢦఆ w ಈ࡞֬ೝ༻ͷApp.vuemain.tsΛআ֎
import dts from 'vite-plugin-dts'; export default defineConfig({ plugins: [ vue(), dts({ tsconfigPath: './tsconfig.json', exclude: ['./src/App.vue', './src/main.ts'], }), ], // 略 }) vite.config.ts
ϥΠϒϥϦԽͨ͠Ϗϧυͷެ։ͱΠϯετʔϧ w npm publishͰϏϧυͨ͠ϑΝΠϧ distҎԼ Λެ։ w OQNSFHJTUSZʹެ։͢Δ߹ϩάΠϯ͕ඞཁ w ެ։ͨ͠ϥΠϒϥϦnpm
installͰΠϯετʔϧՄೳ w node_modulesҎԼʹϏϧυͨ͠distͷ༰ͱಉ͡ͷ͕֨ೲ͞Ε͍ͯΔ w ଞͷOQNϞδϡʔϧͱಉ͡ํ๏ͰϥΠϒϥϦΛར༻
૯ׅ w 7JUF͔Β7VFͷίϯϙʔωϯτΛϥΠϒϥϦԽ͢Δํ๏Λհ w 7JUFͷ-JCSBSZ.PEFͰϏϧυ w 5ZQF4DSJQUͷܕఆٛΛϥΠϒϥϦʹՃ͢Δํ๏Λհ w WJUFQMVHJOEUTͱ͍͏7JUFͷϓϥάΠϯΛར༻
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠