Vite で Vue2 のプロジェクトを作成する - ライブラリビルド編

ちょっと間に Stable Diffusion 3 を挟みましたが、 Vite + Vue2 の続きをメモします。

今日は、このプロジェクトでライブラリビルドを行い npm package 化しようと思います。

目標は Vue2 の任意のプロジェクトで使えることです！

Vue2 でコンポーネントを作る
Vue2 のプロジェクトにインポートしてみる
- パッケージを使う側のプロジェクトの App.vue を変更する
- 動作確認
Vue3 プロジェクトにインポートしてみる
まとめ

Vue2 でコンポーネントを作る

lib ディレクトリの構成は Vite + Vue3 のときの記事と一緒

$ tree lib/
lib/
├── components
│   └── CountUpButton.vue
└── index.ts

Vite + Vue3 でライブラリビルドしたときの記事

1. CountUpButton.vue は Vue2 用に書く

<template>
  <button class="count-up-button" type="button" @click="count++">
    count is {{ count }}
  </button>
</template>

<script lang="ts">
export default {
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<style scoped>
.count-up-button {
  color: #888;
  background-color: #fcc;
}
</style>

こちらも Vue2 に書き直しただけで一緒

2. vite.config.ts / package.jsonを変更する

ここも Vue3 とほぼ一緒

3. ビルド＆出力確認

$ yarn build
yarn run v1.22.22
$ tsc && vite build
vite v5.2.13 building for production...
✓ 5 modules transformed.

[vite:dts] Start generate declaration files...
dist/style.css  0.07 kB │ gzip: 0.08 kB
dist/index.js   0.65 kB │ gzip: 0.40 kB
[vite:dts] Declaration files built in 4950ms.

dist/style.css      0.07 kB │ gzip: 0.08 kB
dist/index.umd.cjs  0.76 kB │ gzip: 0.48 kB
✓ built in 5.32s
Done in 12.58s.

$ tree dist/
dist/
├── components
│   └── CountUpButton.vue.d.ts
├── index.d.ts
├── index.js
├── index.umd.cjs
├── style.css
└── vite.svg

1 directory, 6 files

よし、できた！動作確認するぞー

Vue2 のプロジェクトにインポートしてみる

Vue2 向けの 提供されたパッケージを使う側のプロジェクト は別途用意します。

パッケージを使う側のプロジェクトの App.vue を変更する

まずはnpm linkを使ってと。。。

<template>
  <div class="app">
    <h1>Hello World!</h1>
    <CountUpButton />
  </div>
</template>

<script lang="ts">
import { CountUpButton } from "hello-vue2-lib";
import "hello-vue2-lib/dist/style.css";

export default {
  components: {
    CountUpButton,
  },
};
</script>