使用 Laravel × React + TypeScript 搭建 SPA 的开发环境（使用 Laravel Sail）

1 年 ago
新, 韵
4 minutes

我使用 Laravel Sail 搭建了一个 Laravel9 × React18 的 SPA 开发环境，现在来向大家介绍一下。

有许多关于使用 Laravel × React 创建 SPA 的文章，但是我也总结了如何更改 Sail 的默认设置（在不需要 Docker 知识的情况下）以及如何引入 Sass，所以如果您能阅读这篇文章，我会很高兴。

从2022年6月开始，vite（ヴィート）被选为新安装Laravel时的默认构建工具。本文中也使用vite而不是Laravel Mix。

 

Laravel Sail是什么

Laravel Sail 是一个工具，可以在 Docker 上构建 Laravel 应用程序的开发环境，而无需有 Docker 经验，并使用 PHP、MySQL、Redis 等。但是，如果要更改为使用 MongoDB 而不是 MySQL 等 Sail 并未提供的配置，则可能需要 Docker 知识。

本地环境

    • macOS Monterey v12.3 (MacBook Air M1 2020)

 

    Docker v20.10.8

安装Docker桌面版

使用 Laravel Sail 构建开发环境时，需要安装 Docker。
根据操作系统环境的不同，安装方法也不同，但是对于 macOS 或 Windows 用户而言，可以简单地安装 Docker Desktop 来使用 Docker。
请参考下面的网站等相关资料。

 

如果您想学习Docker，以下的文章可能会给您一些参考。该文章详细介绍了Docker的基本概念和术语，从解释docker-compose.yml的使用到定义和执行多个容器，能够帮助您打下坚实的基础。

 

创建Laravel的开发环境

我們將建立Laravel的開發環境。

请打开终端，并切换到任意目录。
您可以使用以下命令来构建 Laravel 的开发环境。

curl -s "https://laravel.build/example-spa?with=mysql,mailhog" | bash

ここではアプリケーション名を『 example-spa 』にしていますが、お好きな名前に変えていただいても問題ありません。

『 ?with=mysql,mailpit 』をつけること、MySQL と MailHog を利用できます。（ ?with= をつけない場合、mysql、redis、meilisearch、mailpit、selenium が設定されます。）

MySQL の代わりに PostgreSQL を使いたい場合は、『 mysql 』を『 pgsql 』に変更してください。
?with= 以降に設定できるサービスについて詳しく知りたい方は公式サイト(installation choosing-your-sail-services)を参考にしてください。

当创建 Laravel 应用程序时，会要求输入密码，然后输入计算机密码。

Application ready! Build something amazing.
Sail scaffolding installed successfully.

Please provide your password so we can make some final adjustments to your application's permissions.

Password:

输入密码后，我想会显示以下的句子：

Thank you! We hope you build something incredible. 
Dive in with: cd example-spa && ./vendor/bin/sail up

按照指示打字并启动Sail。

cd example-spa && ./vendor/bin/sail up

在网络浏览器中访问 http://localhost，并确认是否显示了一个标有“Laravel”的页面。
按下[Ctrl] + [C]键来暂停Sail一次。

在使用Laravel Sail构建的应用程序中，我们将使用Sail命令进行开发。由于每次都要键入”./vendor/bin/sail”很麻烦，因此我们将设置一个Shell别名。请参考官方网站（sail configuring-a-shell-alias）获取详细信息。

通过设置以下的shell别名，你可以将”./vendor/bin/sail”修改为”alias_name”，并且能够顺利启动。

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
sail up -d

在添加-d之后的sail up是一个选项，可用于启动Sail的背景操作，无需打开新的终端即可输入其他命令。

引入React（支持TypeScript）

那么，我们将进行React开发环境的导入。

这次我们将在Laravel开发环境中搭建React开发环境。
具体来说，在resources目录下创建一个ts目录，在其中使用Laravel安装时同时安装的node、npm和npx工具进行React开发。

检查已搭建的 Laravel 开发环境是否已安装有 node、npm、npx。

sail node --version
# v16.17.0
sail npm --version
# 8.18.0
sail npx --version
# 8.18.0

安装所需的React模块。

使用以下命令，会批量安装在package.json文件中所记录的包（例如在Laravel中使用Vite所需的包）。同时也会创建node_modules目录和package-lock.json文件。

sail npm install

安装所需的 React 模块。

sail npm install -D react react-dom @types/react @types/react-dom
sail npm install -D @vitejs/plugin-react

# Reactでルーティングを実装したい場合は、以下のパッケージもインストール
# sail npm install -D react-router-dom
# sail npm install -D @types/react-router-dom

引入TypeScript

sail npm install -D typescript

sail npx tsc --init --jsx react-jsx

tsconfig.json 将被创建在根目录中。

Vite的设置

我要修改 vite.config.js。

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

export default defineConfig({
    plugins: [
        laravel({
            // input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,

            // typescriptとsassが使えるように変更
            input: [
                'resources/sass/app.scss', 
                'resources/ts/index.tsx'
            ],
        }),
        react(), // <- 追加
    ],
});

在输入中，指定了TSX文件和Sass文件的入口点。如果使用create-react-app构建React环境，index.tsx将成为应用程序的入口点（路径），因此做了相应的调整，但更改为任意文件名也没有问题。

刷新：恢复：true会产生以下效果。

如果refresh选项设置为true，当保存resources/views/**、app/View/Components/**、routes/**的文件时，在npm run dev运行的过程中，浏览器将执行完整的页面刷新。参考：Laravel 和译翻译文档 – vite

通过添加 react() 来引入 Fast Refresh 等功能。详细信息请参考 @vitejs/plugin-react。

创建index.blade.php文件

在views目录中创建一个index.blade.php文件。

请删除 welcome.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>sample-api</title>

        {{-- react に変更があったとき自動で --}}
        @viteReactRefresh
        @vite(['resources/sass/app.scss', 'resources/ts/index.tsx'])

    </head>

    <body class="antialiased">
        <div id="app"></div>
    </body>
</html>

需要在 @vite() 中设置 TSX 文件和 Sass 文件的入口点。
需要先调用 @viteReactRefresh，然后再调用 @vite。

创建index.tsx文件

在resources目录下添加一个名为ts的文件夹，并在其中创建一个index.tsx文件。

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

const container = document.getElementById('app');
const root = createRoot(container!); // createRoot(container!) if you use TypeScript

root.render(
  // <React.StrictMode>
    <div className="text-red">
        Hello World
    </div>
// </React.StrictMode>,
);

编辑web.php文件

将“welcome”更改为“index”。

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

Sass的入门手册

我要安装Sass软件包。

sail npm install -D sass

将resources/css/app.css更改为resources/sass/app.scss。

.text-red {
    color: red;
}

确认 React 和 Sass 的功能正常运行

sail npm run dev

访问 http://localhost，如果以红色文字显示 “Hello World”，那么React和Sass都能正常运行。

Laravel 和 React 的整合

最后，我们将对Laravel和React进行协作。

创建App.tsx

在resources/ts目录下创建App.tsx。

import React, { useEffect } from 'react';
import axios from 'axios';

const App: React.FC = () => {
    useEffect(()=>{
        const fetchFromLaravel = async () => {
            const res  = await axios.get(`/api/hoge`);
            alert(res.data.hoge)
        };
        fetchFromLaravel();
    }, [])

    return (
        <div className="App"></div>
    );
}

export default App;

编辑index.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App'; // <- 追加

const container = document.getElementById('app');
const root = createRoot(container!); // createRoot(container!) if you use TypeScript

root.render(
  // <React.StrictMode>
    <div className="text-red">
        {/* Hello World */}
        <App /> {/* <- 追加 */}
    </div>
// </React.StrictMode>,
);

编辑api.php

Route::get('/hoge', function (Request $request) {
    return response()->json(
        [
            'hoge' => 'Hello from Laravel'
        ]
    );
});

如果在访问 http://localhost 时，弹出 Alert 并显示 “Hello from Laravel”，那就意味着 Laravel 和 React 的协作已经完成。

按下【Ctrl】+【C】键来停止vite。

帆也将停止运行。

sail down

结束

這次只限於設置最基本的Laravel和React連接，並未包含引入認證功能或使用資料庫等。在Laravel中，有許多針對SPA認證的功能，例如Laravel Sanctum，另外還準備了很多用於Web API開發的功能，建議參考官方文件。

✖
广告
将在 10 秒后关闭
bannerAds