Open7

Docker で React × TypeScript × Laravel の環境を構築する

まずは Docker をインストールする

公式から、Docker.dmgをダウンロドして、インストールする。

https://www.docker.com/products/docker-desktop

インストールが完了したら、ターミナルにコマンドを打ってちゃんとインストールされているか確認する。

$ docker

一旦ビルド

$ make npm-install
$ make npm-dev

TypeScriptを導入

node_modulesがあるディレクトリに移動してTypeScriptを導入

$ cd backend
$ npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev

webpack.mix.js を編集

const mix = require("laravel-mix");
mix.ts("resources/ts/App.tsx", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .version();

tsconfig.json を作成

まずは backend ディレクトリで touch
このファイルを編集しないとコンパイルエラーが起こる。

touch tsconfig.json

tsconfig.jsonを編集

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "es2015",
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "moduleResolution": "node",
        "target": "es6",
        "lib": ["es2016", "dom"],
        "allowSyntheticDefaultImports": true
    },
    "include": ["resources/ts/**/*"]
}

https://qiita.com/mineaki27th/items/ad774a41b7a0a68761bd
ログインするとコメントできます