Viteライブラリモードの設定
vite.config.tsのbuild.lib、エントリーポイント、形式（es/cjs/umd）、外部依存関係
「Viteライブラリモードの設定」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ライブラリモード
Viteのライブラリモードは、Webサイトとして実行するのではなく、他のアプリからインポートされるパッケージをビルドします。vite.config.ts の build.lib で設定します。
エントリーポイント
entry ファイルはライブラリの公開インターフェースです。利用者がアクセスすべきすべてのコンポーネントとユーティリティを再エクスポートします。
// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";build.libを設定する
build.lib.entry をそのファイルに設定し、ライブラリにグローバルな name を指定します（UMDビルドで使用されます）。
import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib"
}
}
});formats配列
formats は出力するモジュール形式を選択します。モダンなライブラリでは、["es", "cjs"] によって、ESMバンドラーとNode/CommonJSの利用者に対応できます。
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib",
formats: ["es", "cjs"]
}fileName関数
fileName には形式を受け取る関数を指定できるため、出力ごとに異なる名前を付けられます。
lib: {
// ...
fileName: (format) => "my-ui-lib." + format + ".js"
}Vueを外部化する理由
Vueをライブラリにバンドルしてはいけません。利用者の環境にはすでにVueがあるためです。バンドルするとVueが重複し、リアクティビティが壊れます。Vueを外部化してください。
rollupOptions.external
build.rollupOptions の下の external に vue を指定し、出力内にインライン化せず、インポートとして残します。
build: {
lib: { /* ... */ },
rollupOptions: {
external: ["vue"]
}
}UMD用のoutput.globals
UMDビルドも出力する場合、ブラウザーは各外部依存のグローバル変数名を知る必要があります。vue をグローバル変数の Vue に対応付けます。
rollupOptions: {
external: ["vue"],
output: {
globals: { vue: "Vue" }
}
}ピア依存関係を外部化する
ピア依存関係（アイコンセットや、利用者がすでにインストールしているユーティリティライブラリ）もバンドルせず、外部化してください。
external: ["vue", "vue-router", "@vueuse/core"]ビルドする
ビルドを実行すると、設定した形式のファイルが dist に出力されます。ソースファイルには、同じプラグインパイプライン（vue、vueJsx）が引き続き適用されます。
npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.jsCSSを分離する
コンポーネントのスタイルは、利用者がインポートする独立したCSSファイルとして出力できます。これによりJSバンドルを軽量に保ち、スタイルを含めるかどうかを利用者が制御できます。
// consumer side
import "my-ui-lib/dist/style.css";理解度チェック
Vueライブラリをビルドするとき、なぜ vue を rollupOptions.external に指定するのでしょうか。
まとめ
Viteのライブラリモードは、entry バレルファイル、name、formats 配列（esとcjs）、fileName 関数を使って build.lib の下で設定します。rollupOptions.external で vue（およびピア依存関係）を外部化し、output.globals でUMDのグローバル変数を対応付けて、利用者がVueを提供できるようにします。
よくある質問
「Viteライブラリモードの設定」レッスンは無料ですか？
はい。「Viteライブラリモードの設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Viteライブラリモードの設定」で何を学びますか？
vite.config.tsのbuild.lib、エントリーポイント、形式（es/cjs/umd）、外部依存関係 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Viteライブラリモードの設定」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。