vue-sfc-rollup 및 GiitHub Packages로 구성 요소 배포

이것은 vue-sfc-rollup 와 GitHub Packages 에서 Vue를 나누어 주는 구성 요소로 다른 프로젝트에서 사용할 때의 노트입니다.

절구

개인 관련 커뮤니티에서는'브라우저로 만들 수 있었으면 좋겠다'는 식으로 사이트나 서비스 같은 것을 만들기도 하지만, 프로그램을 써도 디자인을 모르는 경우가 많고, 기능적으로는 부족하지만 외관상으로는 조금 그렇다.
프로그래머가 외관을 정리하는 데 시간을 들이지 않고 같은 지역사회의 서비스가 완전히 달라 보이지 않도록 Vue 구성 요소를 만들어라!혼자서 했어요.

vue-sfc-rollup 사용

vue-sfc-rollup는 Vue의 구성요소를 공개하기 위해 마련한 창고이기 때문에 아래 기사를 참고하여 프로젝트를 제작하였습니다.
https://qiita.com/mitsuya_bauhaus/items/021ba98f849bff614ab0

공정 생성

vue-sfc-rollup의 README에 기재된 명령을 실행하여 프로젝트를 만듭니다.글로벌화에 뒤죽박죽으로 가입하고 싶지 않아서npx 실행했습니다.

$ npx vue-sfc-rollup

? Which version of Vue are you writing for?
> Vue 2
  Vue 3
# Vue 2 を選択

? Is this a single component or a library?
  Single Component
> Library
# 複数のコンポーネントを作りたいので Library を選択

? What is the npm name of your library?
test-library
# 公開するときのパッケージ名を入力

? Will this library be written in JavaScript or TypeScript?
> JavaScript
  TypeScript
# TypeScript は勉強しようと思いつつもおサボり中なので JavaScript を選択

? Enter a location to save the library files
./test-library
# フォルダをつくる場所を入力

명령을 실행한 후 cd 등을 통해 프로젝트 디렉터리로 이동하고 npm install를 통해 의존 관계를 설치한다.설치가 완료된 후npm run serve가 실행되면 로컬 서버가 시작되어 기분이 좋습니다.

구성 요소 추가

구성 요소를 추가하려면 /src/lib-components 폴더에 .vue 파일을 추가합니다.
TestComponentA.vue

<template>
  <div class="test-component-a">
    えー
  </div>
</template>

<script>
export default {
  name: 'TestComponentA',
}
</script>

TestComponentB.vue

<template>
  <div class="test-component-b">
    びー
  </div>
</template>

<script>
export default {
  name: 'TestComponentB',
}
</script>

조립품 제작 후 /src/lib-components의index.js에 보충합니다.여러 개의 구성 요소를 등록할 때 다음과 같다.
index.js

export { default as TestComponentA } from './TestComponentA.vue'
export { default as TestComponentB } from './TestComponentB.vue'

배포 파일 생성

구성 요소를 구성한 후 구축합니다.실행 후 /dist에서 성분을 생성하여 발송할 문서입니다.

$ npm run build

GiitHub Packages로 배포

GitHub Packages는 GiitHub에서 제공하는 패키지 서비스입니다.
구성 요소의 소스 코드는 GiitHub에서 관리합니다.포장의 배포도 기릿허브로 비교적 관리하기 쉬우므로 아래 문서를 참고해 기릿허브 패키지로 배포하기로 했다.
https://docs.github.com/ja/packages/quickstart
https://zenn.dev/odiak/articles/950f05a34e9c84

package.json 수정

package.json의 name에 공개할 매크로 패키지의 이름을 설정합니다.이때 패키지가 공개된 GiitHub 계정의 아이디를 시작으로 설정한다.
package.json

{
  "name": "@hiratake/test-library"
}

또한 여기.의 문서에는 다음과 같은 내용이 기재되어 있다.
package.작업 프로세스에서 json 파일에publishConfig 필드를 설정하는 절차가 추가되면 setup-node 동작으로registry-url을 지정할 필요가 없지만 공개 포장된 등록표는 하나에 한정됩니다.
이번에는 GiitHub Packages에서만 공개되며, 아래 내용package.json 설정publishConfig 필드를 참고하십시오.
https://docs.npmjs.com/cli/v7/configuring-npm/package-json#publishconfig
package.json

{
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/hiratake"
  }
}

공개 포장

이전 문서에서는 GiitHub Action에서 포장을 공개하는 절차에 대해 설명하였으며, 어쨌든 CLI에서 수동으로 공개하였다.

$ npm login --registry=https://npm.pkg.github.com

# 公開前にビルド
$ npm run build

$ npm pack
$ npm publish

가방 공개가 성공하면 GiitHub의 창고 페이지에Packages가 나와 공개 여부를 확인할 수 있다.package.json에 설치description하면 포장을 한눈에 볼 때 이해하기 쉽다.

끝말

자신이 구성 요소를 공개하는 환경을 잘 조정하려면 번거롭기 때문에 간단하게 준비할 수 있는 것이 정말 큰 도움이 되었다.이거 해준 사람 고마워.
제작된 것은 다음과 같다.
https://github.com/jaoafa/jao-ui
저도 디자인이나 전공 공부를 잘 하는 편은 아니기 때문에 해 보았지만 사용하기 쉽다는 말은 좀 미묘하지만 안 좋은 점은 앞으로 개선될 것입니다.Type Script를 만들 시간이 얼마 남지 않았습니다.
읽어주셔서 감사합니다.