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 ϥΠϒϥϦԽͷର৅ʹ͸ؚ·ͳ͍ defineProps<{ message: string }>(); 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ͷϓϥάΠϯΛར༻

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠