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
100
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
42
Symfony でサクッと作る REST API サーバー
azuki
1
59
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
200
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
110
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
310
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
250
Eloquent で relation を扱う基礎
azuki
0
130
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
110
ブラウザでテキストを読み上げる
azuki
0
170
Other Decks in Programming
See All in Programming
保守性を高める AWS CDK のセオリー・ベストプラクティス
yamanashi_ren01
5
410
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
160
読もう! Android build ドキュメント
andpad
1
120
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
160
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
190
⚪⚪の⚪⚪をSwiftUIで再現す る
u503
0
140
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
140
運用しながらリアーキテクチャ
nealle
0
270
気がついたら子供が社会人になって 自分と同じモバイルアプリエンジニアになった件 / Parent-Child Engineers
koishi
0
150
AWS CDKにおけるL2 Constructの仕組み / aws-cdk-l2-construct
gotok365
4
570
AWS Step Functions は CDK で書こう!
konokenj
5
940
もう一人で悩まない! 個の知見をチームの知見にする3つの習慣と工夫 / Into team knowledge.
honyanya
3
380
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.2k
Become a Pro
speakerdeck
PRO
26
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Speed Design
sergeychernyshev
28
830
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Philosophy of Restraint
colly
203
16k
GitHub's CSS Performance
jonrohan
1030
460k
RailsConf 2023
tenderlove
29
1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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ͷϓϥάΠϯΛར༻
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠