bonree-design-plus

运行例子 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，当包有大幅度 增长时，要特别谨慎，根据实际情况进行按需引入或分包处理。

---