test-leem test build

github action

1.github/workflows/npm-package-publish.yml

• https://www.npmjs.com/
• settings
• Access Tokens
• Claasic Token
• Name/Automation -> 토큰발급
• https://github.com/ 이동
• 해당 레파시토리 -> settings
• Secrets and variables -> Actions
• New repository secret
• name/Secret영역에 npm에서 발급받은 토큰입력

/lib/main.ts 작성

import TestLeem1 from '../src/components/TestLeem1.vue'
import TestLeem2 from '../src/components/TestLeem2.vue'

export default{
    install: (app:any, options?:any)=>{
        const globalOptions = options || {};
        app.provide('globalOptions', globalOptions);
        app.config.globalProperties.$testleem = (s:any)=>{
            console.log(s);
            console.log(123);
            return `hello plugins params : ${s}`
        }
        app.component('TestLeem1', TestLeem1);
        app.component('TestLeem2', TestLeem2);
    }
}

export {
    TestLeem1,
    TestLeem2
}

/src/main.ts 에서

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import testleem from '../lib/main'

createApp(App).use(testleem).mount('#app')

vite.config.ts

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      // 여러 진입점은 객체 또는 배열로 지정할 수 있습니다.
      entry: resolve(__dirname, 'lib/main.ts'),
      name: 'testleem',
      // 적절한 확장자가 추가됩니다.
      fileName: 'test-leem'
    },
    rollupOptions: {
      // 라이브러리에 포함하지 않을
      // 디펜던시를 명시해주세요
      external: ['vue'],
      output: {
        // 라이브러리 외부에 존재하는 디펜던시를 위해
        // UMD(Universal Module Definition) 번들링 시 사용될 전역 변수를 명시할 수도 있습니다.
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

package.json

{
    "private": false,
     "main": "./dist/test-leem.umd.cjs",
    "module": "./dist/test-leem.js",
    "exports": {
        ".": {
        "import": "./dist/test-leem.js",
        "require": "./dist/test-leem.umd.cjs"
        }
    },
}

cmd

작업완료 후 
npm run build

/dist/.. 파일 업데이트

npm adduser

npmjs.com 로그인 후

npm publish --access public <-- 초기에만

/버전업 할때
npm version major | minor | patch
npm publish

프로젝트 import

1import { createApp } from 'vue'
2import App from './App.vue'
3import UiComponents from 'test-leem-vue3-components'
4
5createApp(App).use(UiComponents).mount('#app')

1<template>
2  <img alt="Vue logo" src="./assets/logo.png">
3  <HelloWorld msg="Welcome to Your Vue.js App"/>
4  <BsInputField ref="refLoginInput" v-model="testModel" :isError="true">
5    <template #slotInputSectionLeftArea>
6      <BsIcon :type="'icon_arrow_before_line'" />
7    </template>
8    <template #slotInputSectionRightArea> asdf </template>
9    <template #slotSupportMessage> 서포트메시지12 </template>
10  </BsInputField>
11</template>
12
13<script>
14import HelloWorld from './components/HelloWorld.vue'
15import {BsIcon, BsInputField} from 'test-leem-vue3-components'
16
17export default {
18  name: 'App',
19  components: {
20    HelloWorld,
21    BsInputField,
22    BsIcon
23  },
24  data(){
25    return {
26      testModel: 123
27    }
28  }
29}
30</script>
31
32<style>
33#app {
34  font-family: Avenir, Helvetica, Arial, sans-serif;
35  -webkit-font-smoothing: antialiased;
36  -moz-osx-font-smoothing: grayscale;
37  text-align: center;
38  color: #2c3e50;
39  margin-top: 60px;
40}
41</style>
42