はじめに
個人開発メモ📝
現在開発中のカレンダーアプリをTypeScriptを使用して書き換えていきます。
※laravelにViteでreactを導入しています。
Vite内で、typescriptがどのようにビルドされるか
ざっとですが、調べてみました。
Vite起動
↓
vite.config.jsの設定に基づき、プロジェクトがビルドされる
↓
エントリーポイントとなる ex） resources/js/app.tsxファイルからビルドが開始される
エントリーポイントファイルには、Viteの読み込みや初期化が含まれる
↓
Viteで、依存関係の解決や読み込み・解析を行う
↓
開発者は、ViteのHMR（ホットモジュールリプレースメント）機能を使用し、ブラウザで即座に反応が見れる
↓
Viteはビルド後、ブラウザから読み取れるようにするため、javascriptファイルに変換されたファイルを生成する
TypeScriptを使用できるように設定を行う
TypeScriptのインストール
cd プロジェクトディレクトリ
npm install --save-dev typescript @types/react @types/react-dom
tsconfig.jsonファイルの作成
tsconfig.jsonには、コンパイルするファイルやどのオプションを使用するかを記述します。
参考サイト→https://typescript-jp.gitbook.io/deep-dive/project/compilation-context
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "react",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
},
"include": ["resources/js/**/*"],
"exclude": ["node_modules"]
}
"include"は、typescriptがコンパイルするファイルを指定する。
"exclude"は、コンパイル除外するファイルを指定する。
今回だと、resources/js配下のファイルを全てコンパイル対象にしています。
vite.config.jsの編集
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.tsx', //.tsxに変更
refresh: true,
}),
react(),
],
});
ここで、Vite起動後にビルドするファイルを指定します。
app.tsx（今回のエントリーポイントファイル）の編集
import React from 'react';
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client';
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
return pages[`./Pages/${name}.tsx`] || pages[`./Pages/admin/${name}.tsx`]
},
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />)
},
});
参考サイト→https://search.readouble.com/?query=10.x+createInertiaApp
ここの詳細は、後ほど更新します。
ベースのbladeファイルを編集
以下のbladeファイルにreactファイルを読み込んでもらっているので、ここも.tsxに修正します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Script -->
@viteReactRefresh
@vite('resources/js/app.tsx') // .tsxに変更
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
resources/js配下のファイル拡張子を.tsxに変更する
ここは、拡張子を変更しただけなので割愛します。
上記変更を行い、ひとまずローカルに表示するところまではできましたが、各reactファイルがエラーになっているので別記事に更新します。