Laravel MixをつかってLaravelのUIをReactで書く
具体的にはTypeScript + Reactをつかいたい
2021-02-27 現在、この構成は自分は全く使っていない
注意:もし、SPAをやりたい場合はfrontだけCreate React Appなどで書いてLaravelでは成果物をおくのがよい
この場合、このページの以下の内容を読む価値はない
前提知識
LaravelはVueを利用する(Scaffoldingされる)が、ArtisanでReactに変更できる プロジェクト作成後に
php artisan preset react
開発に必要な設定をする
前提
新規に作成したLaravel 5プロジェクト
ReactでScaffoldingされている
説明すること
Laravel Mixを使ってTypeScript + Reactで開発する準備をする
はじめに
トラブったときにググると出てくる情報が古いので、まず公式ドキュメントを眺めるのを強く推奨する(いろいろハマった) HMRの設定をする
2019-02-07 追記:HMRの設定にもなっているはずだけど、ここでのHMRはBrowser Syncのことを言っていて、別物です。
Homestead上ではnpm run watch-pollをすると動的にファイルをwatchして生成してくれる npm run watchとかnpm run hotとかは、VM上ではなくホストでやれば動く
ただこれだとブラウザがリロードされないので、HMRをつかいたい Laravel Mixではローカル(not VM)でnpm run hotをするとHMRを使うことができる 事前準備が必要
asset()をmix()に差し替えないと使えない(動的にリソースサーバのURLを変更するため)
code:welcome.blade.php
// asset('js/app.js)だとHMRは使えない
<script src="{{mix('js/app.js')}}"></script>
HMRができないときのトラブルシュート
Laravel Mix@4にしたらHMRが使えなくなった
llocalhost:8080にたてたサーバにリソースをおいて、それをwebsocketでとってくるようなしくみのようだが、接続できていない
ブラウザのコンソールを見ると、Invalid Host/Origin headerでdisconnectedになっており、ずっとwebsocketがつなぎに行こうとしている
対応
TypeScriptで開発できるようにする
説明がts()使うだけぐらいしか書いてない簡素なものなのだが、次のような不穏な一文がある
Of course, you'll still want to do the necessary tweeks like creating tsconfig.json file and installing DefinitelyTyped, but everything else should be taken care of.
とりあえずtsconfig.jsonの作成とDefinitely Typedのインストールは必要そう
必要そうな依存を入れる
code:zsh
npm install -D typescript
npm install --save react react-dom @types/react @types/react-dom
npm install -D @types/node
npm run hotをすると必要な依存(ts-loaderとか)が勝手にインストールされる
ここでnpmを使っているとyarn.lockが爆誕してうっとおしい。 npmも5系からpackage-lock.jsonをはくようになったのでこれでよくない?kadoyau.icon 設定を書き換える
webpackの設定
code:webpack.mix.js
mix.ts('resources/js/app.ts', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
tsconfigを追加
code:tsconfig.json
{
"compilerOptions": {
"outDir": "./public/js/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./resources/js/**/*"
]
}
includeやoutDirは適宜修正してください
ファイル名をrenameする
.js(x)を.ts(x)に
さらに、
code:tsx
import React, { Component } from 'react';
などとしていると(デフォルトはこうなっている)、コンパイル時にTypeScriptにno default exportと怒られるので次のように修正する
code:tsx
import * as React from 'react';
import { Component } from 'react';
これでTypeScriptもパースできるし、JSX(TSX)も利用できるようになった
課題
public/jsに成果物が毎回置かれるしこのディレクトリはgit管理されているので差分がはちゃめちゃになる
例えばpublic/mix-manifest.jsonには"/js/app.364e85912900f5173c02.hot-update.js": "/js/app.364e85912900f5173c02.hot-update.js",のようなファイルが毎回生成される