该项目目前还缺乏真实场景考验,仅处于玩具阶段
TODO
[ ] 支持browser history [ ] debug为空的场景 [ ] manifest.json报错问题 [ ] 全局路由库如何统一输出api
- 代码风格检查
- mock服务
- css module + less支持
- 约定式目录路由,路由级别的按需加载
- 运行时布局切换,无需在开发过程中为页面指定固定布局,运行时可随时切换布局,方便多场景使用
- 运行时跨项目切换,基于webpack模块联合
- 跨项目资源引用,也是基于webpack模块联合
想法来源于:https://gist.github.com/jamiebuilds/86d467ee4353cb316edce8e69ad19237 实现了大多数功能,未实现部分个人不是很认同的地方
比如有如下目录结构: . +-- src/pages
| +-- Order -> 对应的路由 /order | | +-- Order.page.jsx
| +-- Order.Detail -> 对应的路由 /order/detail | | +-- Detail.page.jsx
| +-- Order.$orderId.Detail -> 对应的路由 /order/:orderId/detail | | +-- Detail.page.jsx
| +-- Order.Detail.orderId$ -> 对应的路由 /order/detail/*orderId | | +-- Detail.page.jsx
通过.page.确定当前目录文件作为路由页面,为了坚持平铺的直观感受,不支持嵌套写法,仅pages下第一层目录生效
. +-- src/layouts
| +-- Index // 标准布局 | | +-- Index.layout.jsx
| +-- Full // 全屏布局 | | +-- Full.layout.jsx
| +-- Vertical // 水平布局 | | +-- Vertical.layout.jsx
| ...可以写任意名称的布局组件仅需满足下方案例即可 |
通过.layout.确定当前目录文件作为路由页面,为了坚持平铺的直观感受,不支持嵌套写法,仅layouts下第一层目录生效
// 一个最简单的布局写法
import React from 'react'
export default function Index({ children }) {
return <div>{{children}}</div>
}
// 无布局访问地址 http://localhost:3000/#/order
// 标准布局访问地址 http://localhost:3000/#/index/order
// 全屏布局访问地址 http://localhost:3000/#/full/order
其他布局访问方式类似,支持运行时快速切换, 无需重新发布
支持项目独立运行,独立部署
比如基于doer创建如下两个项目
App1:
http://localhost:3000/#/index/order
App2:
http://localhost:4000/#/index/order/detail
假设我们需要在app1中访问app2的order/detail页面,这个时候无需重新编译app1和app2
直接访问如下地址即可: http://localhost:3000/#/index/@app2/order/detail
这个时候布局index用的是http://localhost:3000该域名指向的app1中的资源,页面访问的是order/detail
假设App2**享了
一个组件资源 Demo.jsx 一个工具函数 tool.js
对应的配置
// .doerrc.js
module.exports = {
...其他配置
exposes: {
'./Demo': './src/components/Demo/Demo.jsx',
'./tool': './src/utils/tool.js',
},
}
这时候我们需要在App1项目中使用,无需任何配置,通过以下写法即可直接使用
import React, { useEffect } from 'react'
// 跨项目引用函数
import { test } from 'remote:app1/tool'
// 跨项目引用组件
const Demo = React.lazy(() => import('remote:app1/Demo'))
export default function() {
useEffect(() => {
test()
}, [])
return (
<div>
<Demo></Demo>
</div>
)
}
$ doer create app1
$ cd app1
$ npm install
$ npm run dev
$ npm run build
如果你对本项目感兴趣,可以通过脚手架自行创建项目或者使用项目中的examples
examples/app1
examples/app2