ttk-app-core
v3.5.5
Published
@ttk/recat enterprise develop framework
Downloads
2,079
Maintainers
Readme
1 TTK框架现有两个工程
1.1 原ttk json工程
存在问题:
- json写法效率或习惯问题?
- 模块、页面配置项较多
- 编译构建配置文件多、速度慢
1.2 新React hooks工程
采用react 最新hooks写法,但不支持旧项目
2 @ttk/react新功能及优化
2.1 兼容json和hooks
2.2 UI库@ttk/component
antd升级3.26,增加多个新组件,原组件增加大量的新特性,极大提升业务开发效率;分离业务组件,简化样式文件
增加多个新组件
通用
- Typography排版
导航
- PageHeader页头
- Breadcrumb面包屑
数据录入
- Mentions提及
数据展示
- Comment评论
- Descriptions描述列表
- Empty空状态
- Statistic统计数值
反馈
Skeleton骨架屏
Result结果
ConfigProvider全局化配置
原组件增加大量的新特性
- 例如Icon图标的图标主题风格。可选实心、描线、双色等主题风格
分离业务组件,简化样式文件
以下业务相关组件分离,当前版本在@ttk/component/dz下,后续版本废弃删除
- MoneyCellHeader
- MoneyCell
- QuanAndForeCurrency
- SubjectDisplay
- AccountDisplay
- TableSettingCard
- TableOperate
- TableOperate2
- PrintOption
- PrintOption4
- PrintOption3
- FormDecorator
- GridDecorator
- VirtualTable
- VirtualTable2
2.3 统一打包方案fx-webpack
统一配置,可以编译React、Vue
fx.webpack.config.js
module.exports = {
fxVue: false, // 是否使用Vue
fxReact: true, // 是否使用React
}
基于webpack5使用持久化缓存、内容哈希
不仅仅是dev模式下的热更新,重新npm start或npm run build均可读取文件缓存,大幅提速
模块联邦,可依赖远程模块
加载顺序为:ttk_entry 异步----> ttk_host 异步----> ttk_json_apps/ttk_hook_apps
| 联邦模块 | 模块类型 | 入口 | 说明 | | ------- | ------ | --- | --- | | ttk_entry | 本地 | src/index.js | 启动模块,开始显示loading,异步加载host模块后显示返回内容 | | ttk_host | 本地/远程 | src/host.js | 异步加载json和hook模块后初始化,返回显示内容,可发布为远程模块供不同项目使用(包括react等依赖) | | ttk_hook_apps | 本地 | src/apps/index.js | hook写法模块,扫描src/apps目录内的index.js文件加载业务app | | ttk_json_apps | 本地 | src/jsonApps/index.js | json写法模块,扫描src/jsonApps目录内的index.js文件加载业务app |
2.4 简化模块配置、打包配置
统一开发、生产模式的webpack配置
| 配置文件 | 配置说明 | | ------ | ------ | | fx.webpack.config.js | webpack常用配置、自定义配置,默认配置即可 | | config/devServer.js | 开发模式服务代理devServer | | config/moduleFederation.js | 联邦模块配置,默认配置即可,一般不修改 |
2.5 取消app模块概念和相关配置
app模块无需配置、无需使用脚手架
不区分模块,在src/jsonApp、src/apps直接创建目录并新增app即可,无需配置。框架将自动搜索src/jsonApp、src/apps目录内index.js文件并引入
已有项目app模块配置删除脚本
执行npm run delModulesConfig可删除(src/jsonApps目录下)以下配置文件
- app模块下theme目录关于主题样式文件的引用配置
- app模块下index.js关于app入口文件的引用配置
- app模块index.less关于app样式文件的引用配置
原按模块加载app的需求,通过修改自动搜索的正则表达式实现
src/jsonApps/index.js
// 搜索加载所有app
const files = require.context('./', true, /\.\/.+\/index\.js$/)
// 搜索加载指定目录(模块)下app, 如搜索edf和gl目录所有app
// const files = require.context('./', true, /\.\/(edf|gl)\/.+\/index\.js$/)
3. @ttk/react目录结构
3.1 项目目录
| 目录/文件 | 说明 | | ---- | ---- | | config | 开发模式服务代理配置,联邦模块配置 | | help | 框架相关说明文档,包括json、hook工程升级说明 | | public | 单页应用index.html模板所在项目 | | script | 脚本,例如:delModulesConfig为json工程升级时自动删除无用app模块配置文件的脚本 | | src | 源码 | | static | 静态资源目录,打包时拷贝至./dist/static | | .babelrc | babel配置文件,一般不需要修改 | | .eslintignore | eslint配置文件,配置忽略校验的文件或目录 | | .eslintrc.json | eslint配置文件,配置校验规则 | | .gitignore | git配置文件,配置忽略上传的文件或目录 | | .npmrc | npm配置文件,配置npm仓库 | | fx.webpack.config.js | fx-webpack配置文件,统一dev/prod配置,具体见文件内注释说明 | | package.json | npm配置文件,配置依赖包等 |
3.2 src目录
| 目录/文件 | 说明 | | ---- | ---- | | apps | hook写法的app,业务开发主要目录 | | assets | 图片、less、css等资源 | | components | 自定义组件 | | constant | 全局常量 | | jsonApps | json写法的app,业务开发主要目录 | | mock | mock配置文件 | | utils | 自定义工具类 | | index.js | 项目入口文件,import("./bootstrap"), 不修改 | | bootstraps.js | 加载页面,显示loading,异步加载ttk_host模块(可使用远程模块)后显示host模块,可修改loading组件或引入公共样式 | | host.js | 异步加载ttk_json_apps、ttk_hook_apps业务模块,可发布为远程模块,一般不修改 | | polyfill.js | 开头polyfill配置,主要为react-app-polyfill |
4 @ttk/react主要依赖及修改说明
4.1 @ttk/app-loader
数据状态管理、业务app容器,原app-loader目录代码, 修改内容:
- start函数返回Provider,不绑定dom,删除react-dom
- 更新AppLoader和AppContainer生命周期
- 更新react context使用方式
- 修改其他bug
4.2 @ttk/component
公共组件库,目前主要为原json业务使用组件,原components目录代码,修改内容:
- 更新antd 3.26版本,封装新增组件
- 分离业务组件
- 简化样式文件,组件目录和less文件统一调整为导出名称(首字母小写),根据该名称进行按需加载
- 其他样式问题、bug修复
4.3 @ttk/meta-engine
json页面渲染引擎,原meta-engine目录代码,修改内容:
- app顶层element的className增加ttk-json-app,用于统一后的新框架样式兼容
4.4 @ttk/fx-webpack
使用webpack5统一开发、打包配置文件,减少过多配置文件和打包命令,使用babel缓存、webpack持久化缓存提供编译速度
4.5 @ttk/utils
公共工具类,原utils目录代码
5 开发规范及使用说明
5.1 不规范引用或语法
依赖包不要使用相对路径
// 直接修改为依赖包,'@ttk/component'或'antd'
import { Checkbox } from '../../../../../node_modules/antd';
// 直接修改为依赖包,'immutable'
import {fromJS} from "../../../node_modules/immutable/dist/immutable";
import或者url()引入vendor目录中的图片资源文件
- 原因:import或者url()的文件webpack会编译打包会生成1份文件,copy-webpack-plugin配置的文件(如vendor目录)会复制生成一份文件,导致重复输出
- 统一用法: 请移至src/assets/img,使用@/assets/img(@为src别名)引入,或者在fx.webpack.config.js配置别名。当然也可移至业务app内其他合适位置
不要使用core-js相关引用,直接使用es6等新语法,编译会兼容的。
import { isArray } from "core-js/fn/array"; // 删除,直接使用Array.isArray
import { Number } from 'core-js' // 删除,直接使用Number
js文件中不要使用typescript语法, 编译会报错
存在无使用的引用
5.2 样式使用不规范问题
导致不生效
框架升级后app样式也是按需加载的,app使用其他app定义的样式, 将不在正常显示,应在src/assets/app.less配置app公共样式
导致样式覆盖
app的style.less文件定义的css类选择器,不包括在当前app名称的css类选择器下,则当app加载时,会覆盖其他app的样式
5.3 data.js中组件不规范使用
data.js中使用div、a、span等原生html元素请在前面带::,例如::div、::a、::span。不带浏览器console会报错(新框架修改为警告)
数组中组件使用相同的name,浏览器console会报错,影响react渲染性能
5.4 不能直接修改React创建的element的props,新版本React已禁止
5.5 app名称的css类选择器下的样式在modal不生效,不应该采取定义全局css类选择器的方式,因为modal是全局的,会影响其他app的modal,应该把app名称的css类选择器名称(或者自定义唯一的类选择器名称)传给modal
const ret = await this.metaAction.modal('confirm', {
title: '',
// 传给modal的className
className: 'ttk-scm-app-inventory-automaticcalculationxb-confirm',
width: 400,
content: <p>{title}</p>
})