☘️

LaravelでTypeScriptを使おう!

2024/09/09に公開

はじめに

Laravel(Sail)勉強中にTypeScriptもついでに学びたい!と思い立ち環境構築をしました🙌
ですので、はじめてのかた向けの記事になります!
では、やっていきます💁

npmのインストール

まず、こちらのコマンドでnpm(NodePackageManager)をインストールします!

npm install

vite.config.jsの設定

TypeScriptの使用にはLaravelVite(フロントエンドのビルドツール)が必要になります。
/プロジェクトルート/vite.config.jsが設定ファイルになり、こちらを設定していきます🙌

import { defineConfig } from "vite";
//【1】Vite の設定ファイルで【3】のdefineConfig 関数を使用可能にします
import laravel from "laravel-vite-plugin";
//【2】Laravel 用の公式 Vite プラグインをインポートする文
export default defineConfig({
//【3】Viteプロジェクトの設定を定義
    plugins: [
//【4】 使用するViteプラグインの配列
        server: {
//【5】開発サーバーの設定
                hmr: {
                    host: "localhost",
                },
            },
//【6】tsのエントリーポイント
            input: [
                "resources/js/app.ts",
            ],
            refresh: true,
//【7】ファイルが変更されたときにブラウザを自動的にリフレッシュ
        }),
    ],
});

ビルドコマンドの実行

sail npm run build

Blade ディレクティブの設定

@vite(['resources/js/app.ts'])

おわりに

以上となります😊
お疲れさまでした~~🍵

Discussion