在Windows10上构建Laravel ×Vite×React×TypeScript×WSL2环境（适用于初学者）

2 年 ago

文, 翔

3 minutes

行动环境 zuò

※VSCodeはインストールされている前提で進めます。

環境構築的步驟

手順12. web.phpの設定
※今回は特にLaravelのスターターキットなどはインストールしません。

目标人士 or 目标对象

環境構築？面倒！！早くソース書きたい！！という方

步骤1. 安装WSL2

1. 在Windows系统上按下Windows+x键后，再按下a键，启动PowerShell。
2. 在PowerShell中执行以下命令。

wsl --install

第二步。Ubuntu的配置。

1.　Windows上でWindows+sキーを押下してください。
2.　検索項目にUbuntuと入力し、Ubuntuを起動してください。
3.　ユーザ名とパスワードの設定を求められるので、入力してください。
※パスワードは入力しても表示されないので的確に入力
4.　下記画像のようになれば正しく設定されています。

请注意！请将您输入的用户名和密码记录下来，因为在后面的步骤中会用到它们。

wsl -l -v

手順3. Docker Desktopのインストール

1.　下記URLにて、Windows用のDocker Desktopをインストーラーの指示に従ってインストールしてください。
https://docs.docker.com/desktop/install/windows-install/

手順4. Laravelのインストール

1.　エクスプローラーを開き\\wsl$\を入力してください。
2.　Ubuntu配下のhomeディレクトリを開きます。
※手順2. Ubuntuの設定で設定したユーザ名のディレクトリが作成されているかと思います。

5. 输入以下命令安装Laravel。（安装过程可能会比较长，所以您可以边喝茶边耐心等待）
※ “example-app”部分是项目名称，请随意取一个您喜欢的名字。

curl -s https://laravel.build/example-app | bash

当收到以下消息时，请点击确定！

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

8. 请进入刚刚安装Laravel的example-app目录。
9. 请执行下面的命令。

./vendor/bin/sail up -d

手順5. sailコマンドのエイリアス設定

因为每次都要调用/vendor/bin/sail命令很麻烦，所以我将设置一个别名。

1.　下記コマンドを入力し、ファイルを開いてください。

vim ~/.bashrc

2. 按下「i」键，切换到插入模式。
3. 请输入下面的代码。

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

4. 请按下”Esc”键。
5. 输入:wq，然后按下”Enter”键，保存并退出。
6. 为了立即应用.bashrc中的修改，请使用以下命令打入。

source ~/.bashrc

7.　反映されているか確認のため、下記コマンドを叩いてください

sail php --version

如果能够显示PHP的版本，则表示别名设置成功?

第6步。安装React。

必要なパッケージのインストールします。
1.　example-appディレクトリ内で、下記コマンドを叩いてください。

wsl --install

请安装所需的React模块。
2. 请运行以下命令。

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

手順7. TypeScriptのインストール

请在 example-app 目录下运行以下命令。

sail npm install -D typescript
sail npx tsc --init --jsx react-jsx

步骤8. 在Ubuntu上使用VSCode编辑源代码。

按下Ctrl+k后，再按下Ctrl+o，打开目标项目。

第九步。vite的设置

将vite.config.js文件的扩展名更名为vite.config.ts，并按下述方式进行编辑。

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss', 
                'resources/ts/Index.tsx'
            ],
            refresh: true,
        }),
        react(), 
    ],
    server: {
        hmr: {
            host: 'localhost', 
        },
    },
});

警告
下記コードがないと、localhostにアクセスすると画面が真っ白になります。
詳細はGithubのissueにて、ご覧ください。
https://github.com/laravel/vite-plugin/issues/28

    server: {
        hmr: {
            host: 'localhost', 
        },
    },

第十步，创建index.blade.php文件。

在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>Laravel</title>
        @viteReactRefresh
        @vite(['resources/sass/app.scss', 'resources/ts/Index.tsx'])
    </head>
    <body>
        <div id="index"></div>
    </body>
</html>

创建步骤11. Index.tsx。

resourcesディレクトリ内に ts ディレクトリを追加し、その中に Index.tsx を作成します。

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

 const Index:React.FC=()=>{
    return(
        <div>
            Hello World!!!
        </div>
    );
 }

 const container = document.getElementById('index');
 if (container) {
   const root = createRoot(container);
   root.render(<Index />);
 }

第12步。設定web.php文件。

返却するviewファイルをwelcomeからindexに修正します

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

ブラウザのURL入力部に「localhost」と入力して、 Hello World!!!と表示されれば成功です！

まとめ

Laravel Sailを使用するとサクッと開発環境を作れちゃいますね！
Laravel9からMixがViteに置き換わったので、フロントの開発効率が上がりそうですね！
後々、ESLintとPrettierの導入も記事にしようかと思います。