Vueプラグインの公開と型付け
パッケージ構成、ComponentCustomPropertiesのTypeScript拡張、npmでの配布
「Vueプラグインの公開と型付け」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
npm向けプラグインのパッケージ化
Vueプラグインを共有するには、npmパッケージとして公開します。パッケージには適切な依存関係を宣言し、正しくビルドしたものとTypeScriptの型を含め、正しい手順で公開する必要があります。このレッスンでは各手順を取り上げます。
VueのpeerDependencies
Vueは通常の依存関係ではなく、peerDependencyとして列挙します。これによりホストアプリがVueを提供するため、1つのバンドルにVueが2つ含まれることを防げます（リアクティビティが壊れる原因になります）。
{
"name": "vue-toast-kit",
"peerDependencies": {
"vue": "^3.4.0"
},
"devDependencies": {
"vue": "^3.4.0"
}
}Viteのライブラリモード
Viteのライブラリモードでパッケージをビルドします。エントリ、名前、出力形式（ES + UMD）をbuild.libに設定し、Vueがバンドルされないよう外部化します。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: 'src/index.ts',
name: 'VueToastKit',
fileName: 'index',
formats: ['es', 'umd']
}
}
})rollupOptionsでのVueの外部化
vueを外部として指定し、UMDビルドではグローバル変数に対応付けます。これにより、利用側のVueが使われます。
build: {
lib: { /* ... */ },
rollupOptions: {
external: ['vue'],
output: {
globals: { vue: 'Vue' }
}
}
}型宣言の生成
利用者が自動補完と型チェックを利用できるよう、.d.tsファイルをパッケージに含めます。vite-plugin-dtsを使うと、ライブラリのビルド中に型宣言を出力できます。
import dts from 'vite-plugin-dts'
export default defineConfig({
plugins: [
vue(),
dts({ insertTypesEntry: true })
]
})package.jsonのexportsマップ
exportsフィールドで、利用者が正しいファイルを参照できるようにします。ESMビルドと型宣言を公開し、ESMを優先するパッケージではtype: moduleを設定します。
{
"type": "module",
"main": "./dist/index.umd.cjs",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"require": "./dist/index.umd.cjs"
}
}
}型拡張の公開
プラグインがthis.$toastのようなグローバルプロパティを追加する場合は、公開する型にComponentCustomPropertiesの拡張定義を含めます。これにより、利用者のエディターが自動的に認識できます。
// src/types.d.ts (included in the build)
import type { ToastService } from './toast'
declare module 'vue' {
interface ComponentCustomProperties {
$toast: ToastService
}
}
export {}公開エントリポイント
src/index.tsのエントリでは、プラグインをデフォルトとしてエクスポートし、利用者が必要とするコンポーザブル、キー、型もエクスポートします。
import ToastPlugin from './plugin'
export default ToastPlugin
export { useToast } from './composable'
export { toastKey } from './toast'
export type { ToastService, Toast } from './toast'filesフィールド
filesフィールドを使ってビルド出力だけを公開し、パッケージを小さく保ちながらソースと設定ファイルを除外します。
{
"files": ["dist"],
"sideEffects": false
}プロベナンス付きの公開
プロベナンスを付けてnpmに公開すると、パッケージとCIビルドおよびソースコミットを暗号学的に関連付けられます。適切な権限を設定した信頼できるCI（GitHub Actions）から実行してください。
# in CI (GitHub Actions)
npm publish --provenance --access public
# package.json can also set:
# "publishConfig": { "provenance": true }公開前チェックリスト
公開前に、Vueがpeer depになっていること、distにESMと型が含まれていること、exportsが正しく解決されること、バージョンが更新されていること、dry runの結果に問題がないことを確認します。
# inspect what will be published
npm publish --dry-run
# verify the tarball contents
npm packクイックチェック
Vueプラグインの公開についての理解度を確認しましょう。
まとめ
プラグインの公開と型付けについて学びました。
- Vueの重複を避けるため、VueをpeerDependencyとして列挙します
- Viteのライブラリモードでビルドし、Vueを外部化します
.d.ts（vite-plugin-dts）を出力し、型拡張もパッケージに含めますexports、files、type: moduleを設定します- 信頼できるCIから
--provenanceを付けて公開します
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「Vueプラグインの公開と型付け」レッスンは無料ですか？
はい。「Vueプラグインの公開と型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Vueプラグインの公開と型付け」で何を学びますか？
パッケージ構成、ComponentCustomPropertiesのTypeScript拡張、npmでの配布 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Vueプラグインの公開と型付け」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。