TNTWeb - 全称腾讯新闻前端团队,组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。
目前团队主要支持腾讯新闻各业务的前端开发,业务开发之余也积累沉淀了一些前端基础设施,赋能业务提效和产品创新。
团队倡导开源共建,拥有各种技术大牛,团队Github地址:github.com/tnfe
本文作者fantasticsoul
tntweb-admin
本文给大家介绍一个开源的react手脚架项目tntweb-admin,它基于concent、react、react-router、Ant Design、typescript、jest等多项技术搭建,包含有以下特性
webpack,vite双引擎驱动
同时支持 webpack,vite 两种构建工具进行开发与调试,满足喜欢vite
快速调试体验的朋友。
生产环境建议使用webpack打包
// webpack 启动
npm run start
// vite 启动
npm run vite-start
约定式路由,统一错误处理
约定项目根目录下的configs/menus.ts
文件配置菜单,项目启动时自动根据菜单配置生成导航和路由组件,并统一对路由组件包裹componentDidCatch
钩子函数做路由页面错误捕捉,防止整个站点崩溃。
内部路由组件生成过程包裹了React.Suspense
组件,支持用户配置异步路由页面组件。
const menus: Array<IMenuItem | IMenuGroup> = [
{
label: 'template',
path: '/template',
Component: lazy(() => import('pages/_Demos/Template')),
};
];
内置concent最佳实践
concent是一款较新式的数据流方案,它有着高性能、渐进式,自带依赖收集等特点,同时支持中性化model配置和分散式model配置,并提供类vue3
的composition api
编程体验。
项目深度整合了concent
的常用api,并提供了各种场景编码的最佳实践,如全局式共享model配置,页面级model配置,setup的使用等示例。
添加页面
- 添加菜单与路由
src/configs/menus
里添加路由对应的菜单信息,路由path统一维护在src/configs/constant/routerPath.ts
文件 - 添加路由页面
src/pages
目录下添加页面组件
可参考
src/pages/_DemoTempalte
查看示例代码,启动项目后 访问 localhost:3000/template可以访问该组件页面
添加模块
模块可在src/models
目录下添加,也可以在pages/XxxComp里就近添加业务模块,需注意都要在src/models/index.ts
文件里暴露出去,
模块名统一维护在src/configs/c2Mods.ts
文件
- 添加模块名
// src/configs/c2Mods.ts文件
export const HELLO = modName('Hello');
export type T_HELLO = typeof HELLO;
- 添加多文件模块
在
src/models
下添加目录hello
,将模块的state
,reducer
,computed
拆开写
|____models
| |____hello
| | |____state.ts
| | |____reducer.ts
| | |____computed.ts
| | |____index.ts
在state
文件里定义状态【必需】
function getInitialState() {
return {
str: '',
loading: false,
};
}
export type St = ReturnType<typeof getInitialState>;
export default getInitialState;
在reducer
文件里定义方法【可选】
import { St } from './state';
import { VoidPayload, AC } from 'types/store';
import { T_HELLO } from 'configs/c2Mods';
import { delay } from 'utils/timer';
type IAC = AC<T_HELLO>;
export function simpleChange(payload:string, moduleState:St, ac:IAC){
return {str:payload};
}
export async function complexChange(payload:string, moduleState:St, ac:IAC){
await ac.setState({loading:true});
await delay(2000);
// 下面两句可合写为:return {str:payload, loading: false};
ac.dispatch(simpleChange, payload); // 当前文件内复用其他reducer逻辑
return { loading: false };
}
在computed
文件里定义计算【可选】
import { St } from './state';
// only value change will triiger this function to execute again
export function reversedStr({ str }: St) {
return str.split('').reverse().join('');
}
在src/models/hello/index.ts
文件暴露模块
import { HELLO } from 'configs/c2Mods';
import state from './state';
import * as computed from './computed';
import * as reducer from './reducer';
export default {
[HELLO]: {
state,
computed,
reducer,
}
};
在src/models/index.ts
文件引入模块合并到根模块
import global from './global'; // 覆写concent内置的$$global模块
import Hello from './hello';
const toExport = {
...Hello,
...global,
};
export default toExport;
任务组件使用useC2Mod
消费模块数据,使用模块方法
import { useC2Mod } from 'services/concent';
import { HELLO } from 'configs/c2Mods';
export function SomeComp(){
// state:数据,mr:方法
const { state, mr } = useC2Mod(HELLO);
}
100% ts
内置类型文件最佳组织实践,全方位的自动帮你注入类型,轻松驾驭ts,你只需要传入指定的模块名,useC2Mod
钩子函数即可自动帮你推导出模块的项目模块数据、计算数据、相关方法。
丰富的主题设置
-
基于css变量,实现在线主题换肤,实时的主题预览功能(站点主题色、字体透明度等)
-
多种布局排版,27中布局排版组合(3种边栏布局 * 3种顶栏 * 3种快捷导航栏)
-
多色调模式,支持正常、黑白、暗黑3种色调模式
多登录主题
多个登录主题,10+登录主题任意切换
页签
支持页签功能,并关联了浏览器的前进后退行为
国际化
对接了lingui
国际化方案,支持编译期文案替换
lingui 在 vite模式会报错,目前仅支持webpack模式运行
完备的单测
组件下创建__tests__
目录,即可使用jest
对齐书写单测文件
团队
TNTWeb - 腾讯新闻前端团队,TNTWeb致力于行业前沿技术探索和团队成员个人能力提升。为前端开发人员整理出了小程序以及web前端技术领域的最新优质内容,每周更新✨,欢迎star,github地址:github.com/tnfe/TNT-We…