やりたいこと
Vite(ヴィート)でバンドルをします。
バンドルとは複数のJavaScriptファイルを一つのJavaScriptファイルにまとめることです。
webpackが有名ですが、設定が難しく、また開発が終了しているためViteを使用してみます。
環境
node.js: v20.16.0
Vite: 5.3.4
プロジェクトの作成
任意のプロジェクトのフォルダを作成して以下のコマンドを実行します。
npm init vite@latest以下のように聞かれたらｙを入力してエンターを入力します。
Need to install the following packages:
create-vite@5.4.0
Ok to proceed? (y)次に以下のようにプロジェクト名を聞かれるので好きな名前を入力します。
Project name: »次に以下の用にフレームワークの選択が表示されます。環境によって文字がとても読みにくいので注意。↑↓キーで選択できます。
VanillaがFrameworkなし(普通のJavascript)です。
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others次に以下の用に言語の選択が表示されます。環境によって文字がとても読みにくいので注意。↑↓キーで選択できます。
Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
JavaScript続いて作成したプロジェクトに移動します。
cd 作成したプロジェクト名必要なモジュールインストールします。(少し時間がかかります)
npm install試験用のサーバを起動します。
npm run dev以下の用に表示されるのでLocal：に表示されるURLをChromeなどのブラウザで開きます。
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show helpPortは毎回変わるので注意
以下のページが表示されれば成功です。(Count is XXをクリックするとCountが増えます。)
この時点ではバンドルが行われていません。
バンドル
以下のコマンドを実行します。
npm run buildプロジェクト内にdistフォルダが作成され中にhtml/Javascript/cssがバンドルされ作成されます。
(Javascript/Cssはdist/assetsフォルダ下)
フォルダ構成の変更
ここからは任意です。
フォルダ構成をわかりやすくするためとデバッグのしやすさのために以下の作業を行います。
ソリューションのルートに”vite.config.js”という名前のフォルダを作成し以下のように記述します。
import { defineConfig } from "vite";
export default defineConfig({
root: './src',
base: "./",
build: {
outDir: '../dist',
},
});以下の用にフォルダ構成を修正します。
（Srcフォルダにページに使用するファイルを移動します。
プロジェクト
| .gitignore
| package.json
| package-lock.json
| vite.config.js
|
\---src
| style.css
| main.js
| javascript.svg
| index.html
| counter.js
|
+---public
vite.svg
以下のコマンドを実行してビルドを行います。
npm run buildプロジェクト下にdistフォルダが作成されバンドルされたファイルが置かれます。
+---dist
| | vite.svg
| | index.html
| |
| \---assets
| index-BfibREyH.css
| index-BXSNOGaM.jsまた上記の設定を行うことで（具体的にはbase:設定）htmlファイルがサーバーのルートではなくフォルダの先頭になります。
そのためnpm run devで実行し以下のページ(xxxxは表示されるポート番号)をブラウザで表示することでバンドル後のファイルを使用して表示することができます。
http://localhost:xxxx/dist/またVisualStudioのサーバを使用することで表示することも可能です。
base:の設定を行わない場合、バンドル済みのファイルを表示することはできません。(サーバのルートからのパスになっているため個々のファイルを参照できないため)
結果
Viteを利用してバンドル(複数ファイルをひとつに)することができました。
参考にさせていただいたサイト
コメント