用Laravel构建React + TypeScript的开发环境

1 年 ago

逸, 科

2 minutes

这篇文章的目标是什么？

React+TypeScriptとScssを追加しています。

假设

从Laravel9的版本9.2开始，默认的构建工具已经从Webpack（Laravel Mix）更改为Vite。
通过使用Vite，可以加快前端开发的速度，因此我们将使用默认的构建工具Vite来安装React。
Vite是什么？

关于Laravel + Vite + React环境配置

作為遵循以下步驟進行。

⑥画面に表示してみる

编辑Vite

在创建Laravel9项目时，我想您会在项目下方创建一个vite.config.js文件。
由于我们要使用TypeScript，所以请将其扩展名按照以下方式进行编辑。

vite.config.js → vite.config.ts

如果编辑文件扩展名，将按照以下方式编辑其内容。

@vitejs/plugin-reactインポートの追記

react(),の追記

resources/ts/index.tsx’と編集

‘resources/scss/app.scss’SCSSの追記

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        react(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/scss/app.scss',
                'resources/ts/index.tsx'
            ],
            refresh: true,
        }),
    ],
});

安装必要的模块

react-router-domをインストール

npm install
npm install -D react react-dom @types/react @types/react-dom
npm install -D @vitejs/plugin-react
npm install -D typescript
npm add -D sass
npx tsc --init --jsx react-jsx
npm i -D react-router-dom @types/react-router-dom

-D是–save-dev的缩写。–save-dev是一个用于本地安装的命令。

创建index.tsx

因为这次要使用React+TypeScript，所以我们将创建以下的目录和文件，以与在Vite中编写的’resources/ts/index.tsx’相同。

resources
　　┗ ts
　　　　┗ index.tsx

创建scss文件 scss

根据以下方式创建。

resources
　　┗ scss
　　　　┗ app.scss

请确认 packge.json 文件。

请确认在package.json中是否安装了以下内容：
@types/react
@types/react-dom
@vitejs/plugin-react
sass
typescript
尽管它们的版本可能不同，只要这些模块被安装并在package.json中有记录，就没有问题。

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.11",
        "@types/react-router-dom": "^5.3.3",
        "@vitejs/plugin-react": "^3.1.0",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.8.1",
        "sass": "^1.58.3",
        "typescript": "^4.9.5",
        "vite": "^4.0.0"
    }
}

用画面显示一下

我們將編輯以下檔案，並在React端載入和顯示創建的畫面。

resources/scss/app.scss

可以选择新建一个文件，或者将现有的resources/views/index.blade.php文件改名并进行编辑，两种方式都可以。

由于我们只是为了易于理解而进行注释，所以如果进行注释会导致错误的情况可能会发生。

 <!-- resources/views/index.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>laravelView側タイトル</title>
    <!-- @viteReactRefresh は @vite() より先に読み込む必要がある -->
    @viteReactRefresh
    <!-- @vite() ではエントリポイントとなるファイルを指定 -->
    @vite([
    'resources/css/app.css',
    'resources/scss/app.scss',
    'resources/ts/index.tsx',
    ])
</head>
<body>
    <!-- index.tsxの内容を追加する部分 -->
    <div id="app"></div>
</body>
</html>

配置路由以返回 index.blade.php 文件。

Route::get('/', function () {
    return view('index');
});

编写所需在React端执行的处理。

import React from 'react';
import { createRoot } from 'react-dom/client';

// index.blade.phpのid="app"を読み込む
const container = document.getElementById('app');
const root = createRoot(container!); // createRoot(container!) if you use TypeScript

root.render(
    <div className="text-red">
        Laravel React+Typescript環境構築
    </div>
);

为了更易于理解，我们会使用适当的样式。样式可以是任何形式。

.text-red {
    color: red;
    font-size: 50px;
    font-weight: bold;
}

请在浏览器上确认

如果服务器没有启动，请执行以下操作进行确认。

php artisan serve