はじめに
LaravelでのTypeScript、Reactの使用はこちらの記事で紹介されていますが、2020年4月現在だと少しやり方が異なっていたので自分用のメモ書きで残します。ここではcomposerとyarnがインストールされているとします。
Laravelとnpmパッケージのインストール
プロジェクトを残す任意のディレクトリで以下のコマンドを実行します。
$ composer create-project laravel/laravel --prefer-dist プロジェクト名
$ cd ./プロジェクト名
$ composer require laravel/ui
$ php artisan ui react
$ yarn install
Laravelの認証機能を利用する場合は$ php artisan ui reactを
$ php artisan ui react --auth
にするみたいです。
ここまででReactに必要なパッケージは自動でインストールされます。
TypeScript、型定義のインストール
$ yarn add -D typescript ts-loader @types/node @types/react @types/react-dom
tsconfig.jsonを作成します。
$ ./node_modules/.bin/tsc --init
設定書き換え
プロジェクトのディレクトリに生成されているwebpack.mix.jsとtsconfig.jsonの中身を書き換えます。
webpack.mix.js
const mix = require('laravel-mix');
mix.ts('resources/ts/index.tsx', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.react()をmix.ts()に変えたり、TypeScriptの入力ソースをresources/ts/index.tsxに変えたりしてるだけです。
開発時はresources/tsのディレクトリ内でフロントエンド構築すれば良さそう。
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
}
}
tsconfig.jsonについては多分"jsx"の値を"react"にしてあげるだけで大丈夫です。
bladeでscriptを読み込む
index.blade.phpのbodyタグにぶちこんでやります。
index.blade.php
<body>
<div id="root"></div>
<script src="{{ mix('js/index.js') }}"></script>
</body>
asset('js/index.js')でも読み込めますが、mix('js/index.js')でないとHMRを使って開発するときにブラウザの内容が自動更新されないみたいです。
コンパイル
デバッグのときは
$ yarn dev
HMRを使って開発する場合は
$ yarn hot
上記のコマンドを打つとコンパイルに必要でまだ入ってないパッケージが自動で追加されるっぽいです。
リリースのときは
$ yarn prod
おわりに
昨日はこれでうまくいったけど、次にプロジェクト作ってみてうまくいかなかったら修正します。
参考