Midway Hooks 1.0 - 更快的全栈开发方案

繁易
1,762 阅读7分钟

image.png

Hooks 简介

Midway Hooks 是一个更快的全栈开发方案。通过 Serverless + Hooks For Node.js + 一体化 Api 调用的特性，开发者在研发流程中仅需关注业务逻辑，即可高效完成应用的交付。

Github 仓库：midwayjs/hooks，欢迎大家收藏和关注！

特性

  • ☁️  全栈，在 src 一个目录中开发前后端代码
  • 🌈  "零" API，从后端 import 函数，调用时自动转换为 API 请求
  • 🌍 使用 "React Hooks | Vue composition" 开发后端
  • 📦 跨前端框架. 支持 React / Vue3 / ICE.js
  • ⚙️ 基于 Midway, 提供 Web 及 Serverless 场景下的完整支持.
  • 🛡 完善的 TypeScript 支持

Demo

后端 API 与前端调用

backend api src/apis/lambda/index.ts

export async function get() {
  return 'Hello Midway Hooks'
}

export async function post(name: string) {
  return 'Hello ' + name
}

frontend src/page/index.tsx

import { get, post } from './apis/lambda'

get().then((message) => {
  // 发送 GET 请求到 /api/get
  // 返回值： Hello Midway Hooks
  console.log(message)
})

post('github').then((message) => {
  // 发送 Post 请求到 /api/post, HTTP Body is { args: ['github'] }
  // 返回值： Hello github
  console.log(message)
})

使用 Hooks

backend api src/apis/lambda/index.ts

import { useContext } from '@midwayjs/hooks'

export async function getPath() {
  // 获取请求 HTTP Context
  const ctx = useContext()
  return ctx.path
}

frontend src/page/index.tsx

import { getPath } from './apis/lambda'

getPath().then((path) => {
  // 发送 GET 请求到 /api/getPath
  // 返回值: /api/getPath
  console.log(path)
})

1.0 版更新


在经过近 4 个月的孵化与研发，Midway Hooks 正式发布 1.0 版本，本次更新速览：

新功能：


新场景：


其它更新：


欢迎新建项目，体验更好更快的 Midway Hooks 一体化方案！

新功能

新增内置 Hooks

usePlugin

在 1.0 版本中，我们新增了 usePlugin 这个内置的 Hooks，用于获取配置的 Egg 插件。

Demo：通过 egg-sequelize 查询数据库

import { usePlugin } from '@midwayjs/hooks'

export default async function getUserById(empId: number) {
  const sequelize = usePlugin('sequelize');
  console.log(sequelize)
}

文件系统路由

在 1.0 中，我们带来了完善的文件系统路由支持，包含可自定义的文件路由配置、通配路由的支持、移除方法名前缀的下划线。

路由配置

文件路由配置可让你指定函数所在的文件夹及生成 API 时的前缀路径。
如下所示，指定了 lambda 文件夹为默认的函数文件夹，生成的路由前缀是 /api。

f.yml

functionsRule:
  rules:
    - baseDir: lambda
      events:
        http:
          basePath: /api

禁用下划线前缀

同时在新版本中，生成的路由方法名中，不再带有下划线前缀。

在此以 /lambda/about.ts  为例

  • export function contact () → /about/contact


如果想维持 0.x 版本的行为，可以设置 events.http.underscore 为 true，则生成的路由会默认遵循 0.x 的行为。

functionsRule:
  rules:
    - baseDir: lambda
      events:
        http:
          basePath: /api
+         underscore: true

以 /lambda/about.ts  为例，最终生成的路由为：

  • export function contact () → /about/_contact

通配路由

1.0 版本中支持通过文件名生成通配符路由，例如：/api/* ，可以匹配 /api、/api/about、/api/about/a/b/c 等。只需要在文件名上加入 [...] 即可。

例子：

  • /lambda/[...index].ts  → /api/*
  • /lambda/[...user].ts  → /api/user/*
  • /lambda/about/[...contact].ts  → /api/about/contact/*

:::info 我们推荐在通配路由中，只存在 export default 方法，从而避免不必要的路由冲突 :::

单函数中间件

在 1.0 版本中，我们支持了针对单个函数设置中间件的功能，对于一些需要使用到中间件，但又不希望是全局启用的功能会非常有用。

Demo: 输出请求时间

import { withController } from '@midwayjs/hooks'
import { FaaSContext } from '@midwayjs/faas'

const logger = async (ctx: FaaSContext, next) => {
  const start = Date.now()
  await next()
  const cost = Date.now() - start
  console.log(`request ${ctx.url} cost ${cost}ms`)
}

export default withController({
  middleware: [logger]
}, () => {
  return 'Hello Controller'
})

内置 Path Alias 支持

在 1.0 版本中，我们内置了对 Path Alias 功能的支持。

在之前，当后端代码较多时，可能会出现这样的代码：

import format from '../../../../utils/format'


而在使用 Path Alias 后，你可以使用绝对路径去导入依赖：

import format from 'utils/format'


你需要做的只是在 tsconfig.json 中，加入 baseUrl 与 paths 属性。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths" {
      "utils": "./src/apis/utils"
  	}
  }
}

一切就是这么简单，我们的编译器会替你处理好一切。

更友好的报错提示

在 1.0 中，对于错误的 Hooks 使用方式，我们提供了更友好的错误提示。通过图形化的界面，帮助你更快的定位错误与找到解决方案。

新错误输出

image.png

原来的错误输出

image.png

新场景

开源

在过往的这段时间中，Midway Hooks 正式对外开源，成为 Midway 开源体系的一员。

在开源过程中，我们重写了大多数的代码，从而更好的支持集团内部与外部开源场景的诉求，而全新的 Midway Hooks 1.0 的内部版，也是基于外部开源版本构筑而成。

这也意味着，你在开源社区中也可以使用 Midway Hooks 这套方案来快速开发应用。在开源框架方面，我们支持了 ICE/React/Vue 3，你可以选择自己喜欢的框架进行开发。

有使用诉求的朋友，欢迎查看文档：Getting Started - 云端一体解决方案

image.png

前端框架接入方案

在 1.0 版本中，我们也正式对外提供前端框架接入方案，有需要的同学可以根据自己的实际情况，将前端框架快速接入一体化。

目前这套方案已支撑 ICE/React/Vue 3 等多个一体化场景，有业务订制诉求的同学，可以参考此文档进行订制：前端框架接入方案

其它更新

新 OSS 文件上传方案

文件上传是中后台场景的刚需，但由于函数网关的问题，文件无法直传至函数。因此如果需要使用 OSS，就只能使用浏览器 SDK，但秘钥也需要明文存放至前端，会有泄露的风险。

在新版本中，我们选用“后端生成加密地址，前端上传”的方式，来解决 Serverless 场景下 OSS 文件上传的问题，并提供了完善的示例供大家参考。

新方案具有直传 + 保密的优点，解决了过往使用浏览器 SDK 带来了秘钥泄露风险。欢迎各位同学使用：OSS 文件上传

编译优化

在 1.0 版本中，我们修复了许多之前在 0.x 存在的编译问题。例如跨文件调用、递归、匿名函数导出等多个 Case，现在都可以被正确的编译了。

并且在新版本中，前后端的编译器统一，不仅大幅度提升了前端 SDK 生成的速度，且在 0.x 版本中，对于函数文件导出内容的限制也不复存在了。

更快的编译速度，更少的使用限制，使用 Midway Hooks，总能通过底层的升级从而获得更多能力的支持。

体验问题修复

在 1.0 版本中，我们也修复了许多的体验问题，如中后台一体化首次启动无法读取 index.html 导致的网页显示失败页面的错误，亦或是由于脚手架过往的失误，导致在 SSR 场景下无法正确渲染页面的问题。

新版本中，我们逐一修复了这些错误，确保一体化项目做到真正的开箱即用，没有迷惑。

更完善的单测

在 1.0 版本的开发中，我们着重完善了单测的覆盖场景与代码覆盖率。

新版本中，单测覆盖了后端编译、前端自动生成 SDK、代码打包、代码运行等多种场景，确保后续迭代稳定性，避免不必要的错误。

avatar
文章
阅读
粉丝