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);
}
复制代码