TangramUI业务组件库

一、技术栈

基于 react + typescript + antd 根据 Tangram 工具的业务需求扩展衍生出的业务组件库。文档站基于 react-styleguildist + webpack，最终的业务组件用 rollup 打包

二、业务组件开发原则

低耦合、模块化、可复用

三、开发组件&文档

全局依赖

npm install -g git-cz
npm install -g plop

安装工程依赖

yarn

调试、开发组件库启动文档服务

yarn doc

组件开发

新组件以文件夹形式统一放到 components 下，最终在 components 下的 index.ts 文件中导出

利用 plop 工具快速生成组件文件夹，会根据模板文件生成以组件命名的文件夹，同时修改components 下的 index.ts

yarn plop <ComponentName>

提交代码

yarn commit

yarn commit 前需执行 git add .命令进行暂存操作，再执行 yarn commit 命令，按照步骤提示输入，最终 git push 推到远程服务。

文档打包

yarn build_doc

五、组件库打包

yarn build

六、发布前准备

1. 首先确保已经登录 npm 账号并且拥有发布权限
2. 生成版本号、打 tag 和生成更改日志，其他用法详情见standard-version

yarn release -- --release-as <版本号>

 --release-as, -r     手动指定发布类型 (like npm version <major|minor|patch|1.1.0>) [字符串]
  // major: 1.0.0 -> 2.0.0, minor: 1.0.0 -> 1.1.0, patch : 1.0.0 -> 1.0.1
  --prerelease, -p     使用可选的选项值进行预发布，以指定标签id  
  --infile, -i         从这个文件中读取CHANGELOG
  --message, -m        提交消息，将%s替换为新版本
  --first-release, -f  这是第一次发布吗?
  --sign, -s           git提交和标签是否需要签名?
  --no-verify, -n      在提交阶段，绕过pre-commit或commit-msg git钩子  
  --commit-all, -a     提交所有分阶段的更改，而不仅仅是受标准版本影响的文件  
  --silent             不要打印日志和错误
  --tag-prefix, -t     为要创建的git标签设置一个自定义前缀  
  --scripts            为生命周期事件提供执行脚本   (prebump, precommit, [默认值: {}]
  --skip               发布过程中应该被跳过的步骤的映射    [默认值: {}]
  --dry-run            查看运行标准版本将运行的命令  [布尔] [默认值: false]

// 初次发布版本
npm run release --first-release
// 添加版本信息和指定发布版本等级
npm run release -m "Commit message" -r minor

 
// 确认发布，npm publish 发布到 npm
git push --follow-tags origin master && npm publish

成功之后把 tag 推到远程

git push --follow-tags origin dev

七、发布到 npm

如果之前没有登录过 npm 的话，需要先登录再执行发布命令。放到 npm scripts 里 pub 命令。

yarn pub

八、组件库使用

1. 确保项目安装了 antd react react-dom
2. 直接 npm 安装使用包

tips: rollup 打包已经实现按需引入，无需引入插件

体验 demo

安装 npm 包

yarn add epm-tangram-ui

组件里使用

import React from 'react';
import { BaseButton, BaseModal } from 'epm-tangram-ui'

function App() {
  const [visible, setVisible] = React.useState(false);
  const showModal = () => {
    console.log('showmodal');
    setVisible(true);
  };

  const closeModal = () => {
    console.log('closemodal');
    setVisible(false);
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <BaseButton onClick={showModal}>点击我展示弹窗</BaseButton>
        <BaseModal title="Basic Modal" visible={visible} onOk={closeModal} onCancel={closeModal}>
          <p>Some contents...</p>
        </BaseModal>
      </header>
    </div>
  );
}

export default App;

单元测试

yarn test

九、TODO

• [x] 文档示例
• [x] 更改日志
• [x] 文档部署
• [x] 快速新建组件文件夹
• [x] 按需引入
• [x] 单元测试
• [ ] 组件埋点

关于 git-cz (standard-version)

git-cz 约定式提交 为了合理的使用 standard-version，我们首先需要 git add . 文件，然后执行 npm run commit，最后执行 npm run release。

常用的type 类别

• feat：新功能（feature）
• fix：修补 bug
• docs：文档（documentation）
• style： 格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动

关于 standard-version 和 CHANGELOG

CHANGELOG：需 standard-version 自动生成 changelog，是追加式的写入。 文档的更新不会在 CHANGLOG 里出现。 执行 yarn release 自动操作版本升级，更新 package.json 和 CHANGELOG 的版本, 自动打版本号(git tag)。