Laravel 和 Inertia，搭配 React 和 TypeScript
- 创建一个全新的 Laravel 项目。
laravel new inertia-typescript
后端
- 让我们按照这里的说明来设置 Inertia.js 的后端。
composer require inertiajs/inertia-laravel
- 创建根模板，
resources/views/app.blade.php内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
@inertia
</body>
</html>
- 在以下位置创建路由
routes/web.php
use Inertia\Inertia;
Route::get('home', function(){
return Inertia::render('Home');
});
注意：我们尚未创建render方法中指定的 Home 组件。
前端
让我们按照这里的说明来设置前端。
- 我们将从一系列安装开始：
npm install react react-dom @types/react
npm install @inertiajs/inertia @inertiajs/inertia-react
npm install --save-dev ts-loader typescript
- 使用以下命令
typescript创建文件进行初始化：tsconfig.json
tsc --init --jsx react
- 按照下面的步骤初始化我们的 Inertia 应用
resources/js/app.js：
import { InertiaApp } from '@inertiajs/inertia-react'
import React from 'react'
import { render } from 'react-dom'
const app = document.getElementById('app')
render(
<InertiaApp
initialPage={JSON.parse(app.dataset.page)}
resolveComponent={name => import(`./Pages/${name}`).then(module => module.default)}
/>,
app
)
- 创建我们的
Home组件resources/js/Pages/Home.tsx
import React from "react";
const Home = () => {
let foo: string = "React";
const bar: string = "TypeScript";
return (
<h1>
Hello {foo} + {bar}
</h1>
);
};
export default Home;
请注意，我使用的是
.tsx扩展名而不是.jsx
- 修改文件中的
mix.js内容：mix.tswebpack.mix.js
mix.ts('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
-
下一个，
npm run dev -
请阅读下方更新内容👇🏼
🔴 您的文件中会出现错误，resources/js/app.js因为我们编写了一些JSX用于初始化应用程序的语法，但我们还没有安装Babelreact-preset来理解它。
- 让我们将其安装
@babel/preset-react为开发依赖项。
npm install --save-dev @babel/preset-react
.babelrc在项目根目录下创建一个文件，内容如下：
{
"presets": ["@babel/preset-react"]
}
- 再次运行
npm run dev，现在应该可以编译资源了。访问该/home路由以验证是否能在浏览器中看到输出。
免责声明：这并非关于
TypeScript如何在 Laravel 和 Inertia 中使用 React 进行配置的权威指南。这只是我个人进行此配置的方法。
如果您发现任何错误，或者有更好的方法，请在下方评论区留言🙏🏼
示例源代码可以在这里找到。
更新
Amitav Roy在 Twitter 上提到，我们是否可以完全放弃 JavaScript，并且避免@babel/preset-react上述步骤。事实证明，这很容易做到。
以下是 Demo 仓库中的提交示例，展示了如何实现：49be431