bonree-design-plus
TypeScript icon, indicating that this package has built-in type declarations

4.2.8 • Public • Published

运行例子 npm run dev

运行使用说明文档 npm run dumi

代码规范&最佳实践

  • 注释规范,文件、组件,组件参数,变量,方法,关键步骤,必须添加注释

  • 规范限制使用全局状态,防止全局状态泛滥,模块内统一使用Context做状态管理

  • 接口ts声明,所有参数设置为不可靠类型

  • 项目中禁止使用any

  • 组件库划分准则:高内聚,低耦合,业务组件只耦合一个接口

  • 尽量多提取公共方法和公共组件,单个文件代码行数控制在300行以内

  • 防止hooks泛滥,自定义hooks需要理解hooks的本质和应用场景

  • 利用命名空间声明ts,使用起来更方便

  • 高频使用的方法,挂载到全局,避免频繁引入,使用更便捷

  • 用好ts的泛型,对业务进行抽象,方便业务横向扩展

  • 优秀的组件划分,是由一堆解耦的小积木堆积而成,尽量不要做大而全的封装

注意事项

  • 模块开发工程,固定react版本号为17.0.2,react-dom固定版本号为17.0.2

  • 技术栈和 one 项目保持一致,react, react hooks, typescript,one 模块开发脚手架,默认 已支持这些技术栈。

  • 模块工程不能使用懒加载,比如 lazy,可以利用 webpack 多入口进行分包,外部引入利用 bebel 按需引入提升加载性能。

  • 接口规范,模块内调用的接口统一前缀,防止和 one 接口冲突。

  • 模块内统一使用 Context 做全局状态管理,不要引入 mobx,redux 全局状态管理包。

  • 图标组件,统一使用 echarts,切记不要全量引入 echarts 图表,而使用按需引入,脚手架中有一个封装好的图表组件,可以直接使用。

  • 如果使用到 lodash 库,最新框架已支持babel按需引入,放心使用。

  • 全局时间由 one 控制,子模块通过组件参数引入。

  • 子模块在接入 one 后,one 会对子模块的分包进行封装后开启懒加载,子模块的加载不会影响 one 项目的整体性能。

  • 子模块包不能上传到官网 npm 仓库,需要上传到博睿内部 npm 仓库(仓库后续会搭建并提供)。

  • 子模块所有安装的第三方包,去掉^固定版本,根据具体业务需求手动升级。

  • 图标库引入,最新框架已支持babel按需引入,放心使用。

  • 图片处理,小于 200kb 的图片会自动打包成 base64 到模块分包中,大于 200kb 的图片,有两种处理方式,第一,如果想解耦的话,可以上传至 cdn 或图片服务中,第二,如果不耦合,可以放到 one public 目录,那么模块分包强依赖 one 项目。

  • 样式处理,默认情况下,webpack 会以 module 方式打包到 js 文件中,如果有大量的样式文件,且文件大小超过 100kb,可以在 webpack 打包中独立导出样式文件,在 one项目中单独引入。

  • 整体原则:严格控制子模块包的大小,提升加载性能,子模块包大小控制在 2M 以内,目 前添加了组件库、图标库、echarts 图表库、lodash 函数,包大小为 760kb,当包有大幅度 增长时,要特别谨慎,根据实际情况进行按需引入或分包处理。


Readme

Keywords

Package Sidebar

Install

npm i bonree-design-plus

Weekly Downloads

16

Version

4.2.8

License

ISC

Unpacked Size

9.45 MB

Total Files

281

Last publish

Collaborators

  • bonree_zhanghongwei