Wallb 使用方法

文档

wallb 组件及设计、开发详细文档均托管在语雀的破壁知识库中，请自行查阅。

未加入知识库的同学请通过链接邀请申请加入，管理员在审批通过后即可获取成员权限，进入知识库后请将昵称修改为真实姓名。

相关链接

• wallb 线上预览
• wallb-tools 仓库
• ahooks 线上预览
• ProComponents 线上预览

安装

yarn add wallb
yarn add wallb@latest

替换

Incisive-edge 系列产品安装替换 wallb 请参考wallb 安装替换教程。

编码

生成组件

wallb-tools 提供交互命令快速生成组件信息架构，请参考wallb 组件书写教程。

国际化

wallb i18n 实现方式沿用 antd 的方案，请参考wallb i18n 使用方法。

文档书写

wallb 教程文档书写需遵守一定的规则，请参考wallb 教程书写规范。

脚本

build

构建 wallb 组件库 package。调用了 compile  和 dist  命令，生成的 package 会在 CI/CD 中 publish，项目安装的 wallb 内就是这个 package。

site

构建生产环境 wallb 组件库应用。使用 bisheng  构建文档化站点，线上预览的wallb 组件库即由此生成。

start

构建开发环境 wallb 组件库并运行。

quickstart

快速构建开发环境 wallb 组件库并运行。开发环境最常用命令，相对 start  命令， quickstart  会忽略庞大的 antd 组件，只构建 wallb 前缀组件，将运行时间节省到 60s 左右。

compile

构建 wallb 组件库 lib  和 es  部分。使用 gulp  打包。

dist

构建 wallb 组件库的 dist  部分。基于compile 命令生成的 lib  使用 webpack  构建 dist 。

lint

基于 eslint 配置的代码风格检测。会在 husky  的 pre-commit hook 中使用。

lint-fix

检测并尝试修复。

pretty-quick

基于 prettier 配置的代码风格检测。会在 husky 的 pre-commit hook 中使用。

version

根据 package.json  的 version  字段生成应用内显示的 version 。在 start 、 compile 、 dist 、 site 等命令执行前均会通过 hook  执行。

gen-comp

生成新组件目录的命令行工具。

rm-comp

移除组件目录的命令行工具。

流程

破壁流程

开发流程

注意事项

• 只需对组件内部使用的字符硬编码进行国际化，所有 md 文件包括组件文档及 demo 均无需国际化
• wallb 中有很多工作流 hook，例如：version会在很多 hook 中执行，产生一些非主动的代码更新
• commit 代码触发pre-commit hook 执行代码风格检测若存在问题，请务必在修复后重新执行git add，再执行git commit，这一点经常容易被遗忘

优化项

• wallb 内置了ahooks 库，ahooks 提供了许多优质的 React Hooks，非常好用
• wallb 许多组件的设计参照了ProComponents的设计理念，如对实现细节感兴趣，可参考