Vite(Vue.js) + VitePress의 Package 관리

개시하다

이번에저번 제작된 ToDo 애플리케이션의 내비게이션 막대 패키지화를 VistePress로 문서화, 패키지 배부, 사용 등을 소개한다.

페이지 만들기

이상의 글을 바탕으로traning-parts라는 프로젝트를 새로 만들어 환경 설정, SB Admin,Font Awesome의 설치를 진행하십시오.그리고 기존 vue 파일이나public 파일을 삭제하고 다음 파일을 만드십시오.

src/components/NaviBar.vue
→

src/components/NotFound.vue

그 다음,main.ts의 파일 이름, index.ts로 변경하여 다음과 같이 수정합니다.
index.ts

import { createApp } from "vue";

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { dom } from "@fortawesome/fontawesome-svg-core";

import "startbootstrap-sb-admin/src/scss/styles.scss";

library.add(fas);
dom.watch();

// App.vueは不要
createApp({}).component("font-awesome-icon", FontAwesomeIcon);

// パッケージ化するコンポーネントを取り込む
export { default as NaviBar } from "./components/NaviBar.vue";
export { default as NotFound } from "./components/NotFound.vue";

Typescript에서 제작된 패키지를 사용할 수 있도록 types 출력으로 수정되었습니다.
tsconfig.json

  ...
    "declaration": true,
    "emitDeclarationOnly": true,
    "declarationDir": "./types",
  }

패키지에는 CommonJS, ES Module, UMD가 담겨 있는데 이번에는 Vue다.js에서 가져오는 모듈이기 때문에 ES Module만 만듭니다.또한 구성 요소의 동작 확인은vitepress에서 진행하십시오.
package.json

{
  "name": "traning-parts",
  "version": "0.0.0",
  "files": [
    "dist",
    "types"
  ],
  "types": "./types/index.d.ts",
  "module": "./dist/traning-parts.es.js",
  "exports": {
    ".": {
      "import": "./dist/traning-parts.es.js"
    }
  },
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs",
    "build:library": "vue-tsc && vite build"
  },
  ...

마지막으로dist 폴더에es파일이 있는지 확인하려면 아래 명령을 실행하십시오.

> npm run build:library

VitePress

패키지된 어셈블리의 동작을 확인하기 위해 VitePress에서 샘플 디스플레이와 어셈블리 설명을 작성합니다.

> npm i -D vitepress

제작자는 일반적으로 docs 폴더 아래에서Markdown 파일을 제작한다.
docs/index.md

---
title: Introduction
---

# Traning Parts

## 使い方
...

원본 코드는 문장 관계에서 코드 블록 기호로 대체됩니다.
md로 표를 만들 때Excel to Markdown table를 사용하면 Excel로 표를 복사하고 Shift-Art-V로 붙이면 줄을 바꾸어 Mardown 형식으로 변환할 수 있습니다.
docs/guide/navibar.md

# NaviBar

[[toc]]

## Usage
'''vue
<script setup>
const menuItems: MenuItem[] = [
  {
    type: "heading",
    title: "Heading",
  },
  {
    type: "menu",
    title: "Main",
    icon: "fa-list",
    url: "/",
  },
];
</script>

<NaviBar title="Title" :menu-items="menuItems">
  <router-view />
</NaviBar>
'''

## Sample

<a href="navibarSample" target="_blank">Sample</a>

## Props

| Name     | Type       | Required | Description            |
| -------- | ---------- | -------- | ---------------------- |
| title    | string     | true     | タイトルを表示します。 |
| menuItem | MenuItem[] | true     | メニューを設定します。 |

## Type

### MenuItem

| Name  | Type              | Required | Description                                             |
| ----- | ----------------- | -------- | ------------------------------------------------------- |
| type  | "heading" ,"menu" | true     | メニュータイプ<br/>heading の場合は、icon, url 指定不可 |
| title | string            | true     | メニュータイトル                                        |
| icon  | string            | false    | アイコン                                                |
| url   | string            | false    | URL                                                     |

내비게이션 표시줄의 견본은 전체 화면에 표시되기 때문에 다른 창에 표시되는 것과 마찬가지로md 파일은 분리되어 있지만, 보통 한 파일은 문제가 없습니다.lang="ts"를 사용할 수 없는 것 같습니다.
docs/guide/navibarSample.md

<script setup>
import { NaviBar } from "../../src/index";

const menuItems = [
  {
    type: "heading",
    title: "Heading",
  },
  {
    type: "menu",
    title: "Menu",
    icon: "fa-list",
    url: "/",
  },
]
</script>

<NaviBar title="Title" :menu-items="menuItems">
  <h1 class="mt-4">Main Page</h1>
</NaviBar>

VitePress의 router 설정을 수행합니다.vite 옵션은build에서 다음 오류가 발생하기 때문에 추가됩니다.

build.chunkSizeWarningLimit ... Some chunks are larger than 500 KiB after minification.

css.preprocessorOptions.css.charset ... warning: "@charset"must be the first rule in the file

docs/.vitepress/config.ts

import { defineConfig } from "vitepress";

export default defineConfig({
  lang: "ja-JP",
  title: "Traning Parts",
  description: "Traning Parts Vue 3 component library",
  themeConfig: {
    docsDir: "docs",
    sidebar: [
      {
        text: "Introduction",
        link: "/",
      },
      {
        text: "Components",
        children: [{ text: "NaviBar", link: "/guide/navibar" }],
      },
    ],
  },
  vite: {
    build: {
      chunkSizeWarningLimit: 1500,
    },
    css: {
      preprocessorOptions: {
        scss: {
          charset: false,
        },
      },
    },
  },
});

다음 명령을 통해 동작 확인을 확인할 수 있습니다.

> npm run dev
→ プレビュー
> npm run build
→ html作成

Package 공개

Package에는 다음과 같은 서비스가 공개돼 있는데, 이번에는 프로그램이 간단한 Azure Artifact를 사용했다.사용 습관의 절차에 따라 실시하세요.

GitLab Package Registry ... 로컬에서 작성할 수 있습니다.

Verdaccio 　... 로컬에서 작성할 수 있습니다.

GitHub Packages ... 무제한 Public, Private ~ 500MB 무료

Azure Artifact 　... 2GB까지 무료.

Azure Artifact에 로그인하여 제작된 Project에서 Artifacts를 선택합니다.따라서 Create Feed를 선택하여 다음 항목으로 Feed를 만듭니다.
・Name...traning-parts

[Connect to feed] 버튼을 눌러 npm을 선택하고 상기 절차에 따라 Package 공개를 진행한다.

.npmrc

registry=https://pkgs.dev.azure.com/....      
always-auth=true

> vsts-npm-auth -config .npmrc
→ Azure Artifactsのアクセストークン作成
> npm publish
→ パッケージ公開

소스 파일을 변경할 때 package.json의vesion을 계수한 후publish를 진행합니다.

이용 방법

이번에 제작된 패키지를 활용해 내비게이션 막대를 실제로 보여준다.
우선 새로운 프로젝트를 만들고 제작된 패키지를 설치한다.그때는 Package가 공개적으로 제작했습니다.npmrc 복사.

> npm i traning-parts
→ 必要なパッケージがすべてインストールされる。
> npm i -D sass
→ scssをimportする際に必要。

다음에 제작된 소프트웨어 패키지를 사용하여 내비게이션 표시줄을 표시합니다.필요하지 않은 vue 파일을 삭제하십시오.
views/Main.vue

<template>
  <h1 class="mt-4">Main Page</h1>
</template>

views/Sub.vue

<template>
  <h1 class="mt-4">Sub Page</h1>
</template>

App.vue

<script setup lang="ts">
import { NaviBar, MenuItem } from 'traning-parts'

const menuItems : MenuItem[] = [
  {
    type: "heading",
    title: "Heading",
  },
  {
    type: "menu",
    title: "Main",
    icon: "fa-list",
    url: "/",
  },
  {
    type: "menu",
    title: "Sub",
    icon: "fa-list-alt",
    url: "/sub",
  },
]
</script>

<template>
  <NaviBar title="test" :menu-items="menuItems">
    <router-view />
  </NaviBar>
</template>

router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import { NotFound } from 'traning-parts'
import Main from "../views/Main.vue";
import Sub from "../views/Sub.vue";

const routers: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: Main,
  },
  {
    path: "/sub",
    component: Sub,
  },
  {
    path: "/:pathMatch(.*)*",
    component: NotFound,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: routers,
});

export default router;

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";

import "startbootstrap-sb-admin/src/scss/styles.scss";

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

이것만 이루어지면 끝이야.동작 확인으로 탐색 모음이 제대로 작동하는지 확인합니다.Package가 업데이트된 경우 package.json의version을 변경하여npm 업데이트를 진행하십시오.

> npm update traning-parts

끝맺다

bootstrap+vitePress를 이용할 때 scss를 이용하지 않으면 Warning: "@charset"must be the first rule in the file이 나와 눈치채기까지 힘들었습니다.
앞으로 바이트 패키지 개발 프로젝트도 늘어날 것 같아서 이 기사를 활용했으면 좋겠어요.