Midway Hooks Frontend Framework Toolkit

RFC.md

简述

开发工具包，为各个前端框架提供快速 & 好用的一体化能力

特性

• 基于 Vite，上层框架无感
• 统一脚手架
  • start: 启动生产服务
    • --port=[3000] 应用监听端口
    • --host=[localhost] 应用监听地址
  • dev: 启动开发服务
    • --port=[3000] 应用监听端口
    • --host=[localhost] 应用监听地址
  • test: 基于 vitest，提供前后端一体化的测试
    • --type=[app]|server|client 运行应用单测 OR 后端 OR 前端单测
  • build: 构建前后端产物
    • --target=[node]|worker 生成支持 Node / Worker 的产物
    • --outDir=[dist] 产物地址
• 统一配置文件 midway.config.ts，合并 vite.config.ts
• 支持部署类型
  • Web
    • Tech Stack: @midwayjs/hooks + @midwayjs/koa + vite + (Vue/React/Svelte…)
    • 需托管页面
  • Serverless & Worker
    • Tech Stack: @midwayjs/hooks + @midwayjs/faas + vite + (Vue/React/Svelte…)
    • 需托管页面
  • SSR Framework
    • Tech Stack: @midwayjs/hooks + ? + Next.js/Nuxt.js/SvelteKit
    • 无需托管

目录结构

minimal example for react

.
├── midway.config.ts
├── package.json
├── src
│   ├── api
│   │   └── date.ts
│   ├── index.css
│   └── index.tsx
└── tsconfig.json

Demo

src/api/date.ts

import { Decorate, Get } from '@midwayjs/hooks';

export const getDate = Decorate(
  Get(), 
  async () => {
    return new Date().toLocaleString();
  }
);

src/index.tsx

import React from 'react';
import { getDate } from './api/date';
import { useRequest } from 'ahooks';

export default () => {
  const { data } = useRequest(() => getDate());
  return <h1>Server Date is: {data}</h1>
}

midway.config.ts

import { defineConfig } from '@midwayjs/hooks'; // Web & Serverless
import { defineConfig } from '@midwayjs/next'; // Next.js
import { defineConfig } from '@midwayjs/nuxt'; // Nuxt.js

export default defineConfig({})

项目配置(midway.config.ts)

type Config = {
}