Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する

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.PEVMF΍6.%ͳͲͷܗࣜΛࢦఆ 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.ts΍src/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.vue΍main.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ͷϓϥάΠϯΛར༻

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する

Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する

SAW

More Decks by SAW

Other Decks in Programming

Featured

Transcript

7JUFͷ-JCSBSZ.PEFΛ࢖ͬͯ 7VFͷίϯϙʔωϯτΛϥΠϒϥϦԽ͢Δ WLBOTBJ.FFUVQ 4"8

$(whoami) w ࢯ໊Ճ౻फҰ࿠ ࡀ w ϋϯυϧωʔϜ4"8 w 9 چ5XJUUFS

7JUFͷ-JCSBSZ.PEF w ϓϩδΣΫτΛ഑෍ՄೳͳϥΠϒϥϦ༻ͷܗࣜͰϏϧυ͢ΔͨΊͷઃఆ w OQNSFHJTUSZͳͲʹ഑෍͔ͯ͠Βnpm installͰΠϯετʔϧͯ͠ར༻ w vite.config.tsͰϏϧυઃఆΛมߋ w ΤϯτϦϙΠϯτ΍ग़ྗܗࣜ

vite.config.tsͷઃఆྫ w defineConfig()ͷbuild.libʹઃఆΛ௥Ճ w entryΤϯτϦϙΠϯτͱͳΔϑΝΠϧ w +BWB4DSJQU·ͨ͸5ZQF4DSJQUͷϑΝΠϧύεΛࢦఆ w nameϥΠϒϥϦԽͨ͠ࡍͷάϩʔόϧม਺໊ w

7VFͷίϯϙʔωϯτΛϥΠϒϥϦԽ w 7VFίϯϙʔωϯτΛΤϯτϦϙΠϯτܦ༝Ͱexport w ϥΠϒϥϦԽ͢Δର৅ͷίϯϙʔωϯτͷΈΛexport w src/main.ts΍src/App.vue͸ίϯϙʔωϯτͷಈ࡞֬ೝ༻ʹ࢒͢ w ϥΠϒϥϦԽͷର৅ʹ͸ؚ·ͳ͍

5ZQF4DSJQUͷܕఆٛΛ௥Ճ w σϑΥϧτͰ͸7JUF͔Β5ZQF4DSJQUͷܕఆٛΛϏϧυʹ௥ՃͰ͖ͳ͍ w distҎԼʹܕఆٛϑΝΠϧ *.d.ts ͕ੜ੒͞Εͳ͍ w WJUFQMVHJOEUTͱ͍͏ϓϥάΠϯΛར༻͢Δ͜ͱͰܕఆٛΛ௥ՃՄೳ w

WJUFQMVHJOEUTͷઃఆྫ w defineConfig()ͷpluginϓϩύςΟʹઃఆΛ௥Ճ w tsconfigPathtsconfig.jsonͷύεΛࢦఆ w excludeϏϧυͷର৅֎ͷϑΝΠϧΛࢦఆ w ಈ࡞֬ೝ༻ͷApp.vue΍main.tsΛআ֎

ϥΠϒϥϦԽͨ͠Ϗϧυͷެ։ͱΠϯετʔϧ w npm publishͰϏϧυͨ͠ϑΝΠϧ distҎԼ Λެ։ w OQNSFHJTUSZʹެ։͢Δ৔߹͸ϩάΠϯ͕ඞཁ w ެ։ͨ͠ϥΠϒϥϦ͸npm

૯ׅ w 7JUF͔Β7VFͷίϯϙʔωϯτΛϥΠϒϥϦԽ͢Δํ๏Λ঺հ w 7JUFͷ-JCSBSZ.PEFͰϏϧυ w 5ZQF4DSJQUͷܕఆٛΛϥΠϒϥϦ಺ʹ௥Ճ͢Δํ๏Λ঺հ w WJUFQMVHJOEUTͱ͍͏7JUFͷϓϥάΠϯΛར༻

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠