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
230
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
v-kansai Meetup #16 の発表資料です。
SAW
January 17, 2025
Tweet
Share
More Decks by SAW
See All by SAW
PHP で form-data を POST 以外のメソッドで受け取るには?
azuki
0
15
PHP で学ぶ OAuth 入門
azuki
2
630
EditorConfig を使ってみよう
azuki
1
84
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
Other Decks in Programming
See All in Programming
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
130
モテるデスク環境
mozumasu
3
710
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
開発生産性を上げるための生成AI活用術
starfish719
3
1.6k
CSC509 Lecture 08
javiergs
PRO
0
230
Webサーバーサイド言語としてのRustについて
kouyuume
0
3.5k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Google Opalで使える37のライブラリ
mickey_kubo
3
130
CSC305 Lecture 09
javiergs
PRO
0
300
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
7k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Embracing the Ebb and Flow
colly
88
4.9k
Become a Pro
speakerdeck
PRO
29
5.6k
KATA
mclloyd
PRO
32
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Designing Experiences People Love
moore
142
24k
GitHub's CSS Performance
jonrohan
1032
470k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
BBQ
matthewcrist
89
9.8k
Statistics for Hackers
jakevdp
799
220k
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ͷϓϥάΠϯΛར༻
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠