larave-mixでtypesctipt + reactをビルドする

元記事

目的

laravel-mixでtypescript + reactのフロントエンド環境を構築する

手順

laravelのプロジェクト作成は省略

ビルドに必要なモジュールのインストール

typescriptのコンパイラーとreact

npm install --save-dev typescript ts-loader react react-dom @types/react @types/react-dom

typescriptのビルド設定

tsconfig.jsonの生成

./node_modules/.bin/tsc --init

編集

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", 
    "jsx": "react",
    "strict": true 
  },
  "exclude": [
    "node_modules",
    "vendor"
  ]
}

webpack.mix.js編集

resources/assets/js/app.jsをエントリポイントにしてるので変更

*.tsと*.tsxはts-loaderを使うように

let mix = require('laravel-mix');

mix.js('resources/assets/ts/app.tsx', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                },
            ],
        },
        resolve: {
            extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
        },
   });

app.tsxを用意してビルド

resources/assets/ts/app.tsx

import * as React from 'react';
import { render } from 'react-dom';

interface Props
{

}

const App = (props: Props) => (
    <div>hello react</div>
);

render(<App/>, document.getElementById('app'));

ビルド

npm run dev

確認