chiyan-lin
commented
3 years ago 参考其他人的做法，整理了一下组件库大概需要的功能
参考
- vant-cli
- vue-cli-template-library
- jslib-base
- father
必要功能
- 支持ES6+或TypeScript编写源码
- 支持 cjs、esm 和 umd 等不同格式的打包
- 支持各类校验(ESlint、Stylelint、prettier、pre-commit 。。。)
- 集成单元测试和端到端测试环境+测试覆盖率(jest + vue-test-utils 或 karma + mocha + chai)
- 自动生成文档站点和组件示例(storybook 或 vue-markdown-loader)
- 自动化版本管理(SemanticRelease, 自动化Git tag、npm version、 releases changelog)
- 内置各类模板(组件源码模板、测试代码模板、文档模板、ISSUE模板)
- 接入CI（test->build->releases）
- 统一的命令行指令
可选功能
项目结构
multi repo
├── src 组件源代码目录 ├── index.js ├── package.json ├── test 测试用例 ├── types 类型申明 ├── fec.config.js 构建 ├── CHANGELOG.md 变更日志 ├── README.md 组件文档 └── TODO.md 计划功能开发流程
- fec init hago-library-seed vue-component/js/directive (脚手架初始化，仓库创建)
- yarn dev 在开发过程中对文档和示例进行预览
- 编写用例和文档
- 开发
- yarn test 查看覆盖率和通过率
- push merge
- CI
- test lint
test 通过率覆盖率
- build
构建组件库，在es和lib目录生成可用于生产环境的组件代码
构建文档站点，在site目录生成可用于生产环境的文档站点代码（GitLab Pages）
- release
生成changelog
自动更新版本号，publish 到 npm
站点文档使用门户抓取
开发流程+组件库 重构
0. 出发点
目前活动页或前端项目开发中，缺乏统一的开发标准和为业务定制的统一开发框架，不利于沉淀和积累产出。
所以希望从制定组内统一的基础开发框架与标准来做到：
通过自下而上的流程，从底层框架开始优化开发流程，和达到沉淀组件库的目的，从而提高开发效率与降低交接成本。
* 开发框架指业务开发框架，意图是根据hago业务整合的库集合
1. 集成 fec/vuex/ts/lint 的整体框架
目前的问题
《蚂蚁前端研发最佳实践》
《蚂蚁金服的前端框架和工程化实践》
思路/功能
希望达到的目标
衡量指标
2. 整合框架
3. 界面代码分层结构
视图层
UI与交互的部分，自身基本为PureComponent，不含有自身数据
所有交互产生的逻辑与数据处理都交由领域层处理
领域层
纯逻辑处理部分，本身负责处理数据获取与发送的职责
好处
视图层都是PureComponent的设计，能提高组件部分复用的可能
领域层基于OOP设计，可以用抽象类表示一组同样行为的逻辑，例如榜单、抽奖等。这样复用时只需要根据业务派生实现对应的抽象方法即可