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
220
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
v-kansai Meetup #16 の発表資料です。
SAW
January 17, 2025
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
610
EditorConfig を使ってみよう
azuki
1
83
Symfony でサクッと作る REST API サーバー
azuki
1
180
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
320
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
370
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
330
Eloquent で relation を扱う基礎
azuki
0
170
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
130
Other Decks in Programming
See All in Programming
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
210
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
チームの境界をブチ抜いていけ
tokai235
0
170
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
700
CSC305 Lecture 04
javiergs
PRO
0
270
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
CSC305 Lecture 03
javiergs
PRO
0
240
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Music & Morning Musume
bryan
46
6.8k
Automating Front-end Workflow
addyosmani
1371
200k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Scaling GitHub
holman
463
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Thoughts on Productivity
jonyablonski
70
4.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Agile that works and the tools we love
rasmusluckow
331
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
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ͷϓϥάΠϯΛར༻
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠