☘️
LaravelでTypeScriptを使おう!
はじめに
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