总结

尝试使用类似Laravel的全栈TypeScript框架。
使用Inertia v1 + Adonis + React + Typescript。

企业社会责任

安装

我推荐使用纱线。

yarn create adonis-ts-app .

yarn create v1.22.17
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Installed "create-adonis-ts-app@4.2.4" with binaries:
      - create-adonis-ts-app

     _       _             _         _ ____  
    / \   __| | ___  _ __ (_)___    | / ___| 
   / _ \ / _` |/ _ \| '_ \| / __|_  | \___ \ 
  / ___ \ (_| | (_) | | | | \__ \ |_| |___) |
 /_/   \_\__,_|\___/|_| |_|_|___/\___/|____/ 
                                             


CUSTOMIZE PROJECT
❯ Select the project structure …  Press <ENTER> to select
❯ api   (Tailored for creating a REST API server)
  web   (Traditional web application with server rendered templates)
  slim  (A smallest possible AdonisJS application)

当安装完成后，在命令行界面上会以多彩的方式展示各种功能。这次我们选择了网络安装，并在之后全部选择了是。

CUSTOMIZE PROJECT
❯ Select the project structure · web
❯ Enter the project name · test
❯ Setup eslint? (y/N) · true
❯ Setup prettier? (y/N) · true
❯ Configure webpack encore for compiling frontend assets? (y/N) · true

请确认启动

我們先確認一下到目前為止是否成功啟動。

node ace serve --watch         

一切顺利启动。

慣性 + React + Typescript的引入（單頁應用程序）

使用adonis提供者的惰性。

安装

yarn add @eidellev/inertia-adonisjs

我們必須設置必要的程式庫和其相應的配置。
在選擇時請仍然保持瀏覽器的狀態。

yarn add @adonisjs/view
yarn add @adonisjs/session

node ace configure @adonisjs/view
node ace configure @adonisjs/session

我会执行能够构建的命令。

node ace configure @eidellev/inertia-adonisjs

我暂时不考虑SSR。

 node ace configure @eidellev/inertia-adonisjs
❯ Enter the `.edge` view file you would like to use as your root template · app
❯ Would you like to use SSR? (y/N) · false
❯ Which client-side adapter would you like to set up? · @inertiajs/react
[ wait ]  Installing dependencies: @inertiajs/react, react, react-dom, @types/react, @types/react-dom . 

这样就包含了React相关和Inertia相关。

然后，在kernel.ts中添加中间件配置。

- Server.middleware.register([() => import('@ioc:Adonis/Core/BodyParser')])
+ Server.middleware.register([
+   () => import('@ioc:Adonis/Core/BodyParser'),
+   () => import('@ioc:EidelLev/Inertia/Middleware'),
+ ]);

将 app.js 更名为 app.tsx，并将内容更改为以下：

import { createRoot } from 'react-dom/client'
import { createInertiaApp } from '@inertiajs/react'

createInertiaApp({
  id: 'app',
  resolve: (name) => require(`./pages/${name}`),
  setup: ({ el, App, props }) => createRoot(el).render(<App {...props} />),
})

我会在tsconfig.json文件中添加选项。

"compilerOptions": {
    "lib": ["dom"],
    "jsx": "react-jsx",

然后，在app.tsx文件的同一层目录下创建pages文件夹和tsconfig.json文件。

tsconfig.json的内容如下

{
  "include": ["./*"],
  "compilerOptions": {
    "target": "ES2015",
    "lib": ["dom"],
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "types": [
      "@eidellev/inertia-adonisjs"
    ]
  }
}

下面我将在webpack.config.js文件中写下对react、ts和入口文件的修改。

- Encore.addEntry('app', './resources/js/app.js')
+ Encore.addEntry('app', './resources/js/app.tsx')
+ Encore.enableTypeScriptLoader()
+ Encore.enableReactPreset()

我会安装编译所需的东西。

顺便一提，如果执行”node ace serve”命令

请警告我输入如下内容

[ encore ] Running webpack-dev-server ...
  Error: Install @babel/preset-react to use enableReactPreset()  39m
    yarn add @babel/preset-react@^7.0.0 --dev

[ encore ] Running webpack-dev-server ...
  Error: Install ts-loader to use enableTypeScriptLoader()
    yarn add ts-loader@^9.0.0 --dev

只需要以下两个是必要的

yarn add @babel/preset-react@^7.0.0 ts-loader@^9.0.0 --dev

由于在config/shield.ts中没有使用Env，但是却进行了import，所以需要在tsconfig.json中设置noUnusedParameters，或者以_开头重新配置。

// 修正案1 (tsconfig.json)
  "compilerOptions": {
    "noUnusedParameters": true,

// 修正案2 (config/shield.ts)
import _Env from '@ioc:Adonis/Core/Env'

如果在这种状态下使用 `node ace serve` 的话，

应该可以正常启动。

确认动作。
添加路由表。

Route.get('/test', async ({ inertia }) => {
  return inertia.render('test', { name: 'adonis' })
}).as('test')
Route.get('/test2', async ({ inertia }) => {
  return inertia.render('test2', { name: 'adonis2' })
}).as('test2')

我将在pages上创建test和test2页面。

import { Link } from '@inertiajs/react'

const Test = ({ name }) => (
  <div>
    Hello world, {name}!
    <p>
      go to <Link href="test2">test</Link>
    </p>
  </div>
)

export default Test

import { Link } from '@inertiajs/react'

const Test2 = ({ name }) => (
  <div>
    Hello world, {name}!
    <p>
      go to <Link href="test2">test</Link>
    </p>
  </div>
)

export default Test2

如果没有加载问题并顺利过渡，那么我们已经成功建立了一个不需要重新加载的CSR中的Inertia React TS环境。

顺便提一下，SR确实无限的错误，办不到。