目标

使用 react + typescript 写组件库，发布至 npm，支持按需加载，有文档，单元测试和 CI

项目地址

本文主要记录开发过程中遇到的一些配置问题，以及如何解决的。可能不是最好的解决方案，但总归还是解决了吧，如果有人遇到相同问题的可以参考一下。

jest 配置

使用 jest 和 enzyme 写单元测试。使用 jest-unit 生成 xml 的报告，用于在 circleCI 上可以直观的看到测试结果。配置 coverage 相关配置可以生成更详细的测试报告，然后把这些测试报告发送到 codecov ，主要是为了拿徽章

运行测试时一些 es6 以上的代码报错

  "setupFiles": [
    "core-js"
  ]

别名配置

"moduleNameMapper": {
  "^@components(.*)$": "<rootDir>/src/components$1",
  "^@utils(.*)$": "<rootDir>/src/common/utils$1"
}

circleCI 配置

根据模板修改

配置 node 版本

一开始使用模板的配置，CI 显示了 node 报错

defaults: &defaults
  docker:
    - image: circleci/node:10.15.3

缓存

每次运行 CI 都要重新下载 node_mudule 浪费时间，如果 package.json 不改变的话可以不用重新下载

- restore_cache:
    keys:
      - dependency-cache-{{ checksum "package.json" }}
- run: yarn install
- save_cache:
    paths:
      - node_modules
    key: dependency-cache-{{ checksum "package.json" }}

持久化存储文件

保存 node_module

- persist_to_workspace:
    root: .
    paths:
      - node_modules

保存需要发布的文件

- persist_to_workspace:
    root: .
    paths:
      - build/lib
      - package.json
      - README.md

根据 git tag 发布

如果每次 git push 都执行发布流程不合适，我只想在某个特定的提交的时候发布

workflows:
  version: 2
  build_accept_deploy:
    jobs:
      - prepare:
          filters:
            tags:
              only: /v[0-9]+(\.[0-9]+)*/
      - build:
          requires:
            - test
          filters:
            tags:
              only: /v[0-9]+(\.[0-9]+)*/
            branches:
              ignore: /.*/
      - test:
          requires:
            - prepare
          filters:
            tags:
              only: /v[0-9]+(\.[0-9]+)*/
      - publish:
          requires:
            - build
          filters:
            tags:
              only: /v[0-9]+(\.[0-9]+)*/
            branches:
              ignore: /.*/

注意：

一开始 git push 依然会触发 publish，原因是
```
branches:
  ignore: /.*/
```
这个一定要加
后来发现 git push origin --tags 会无法触发 CI，原因是其他的流程也要加 filter
```
filters:
  tags:
    only: /v[0-9]+(\.[0-9]+)*/
```

TypeScript + React 构建组件库 -- 配置篇（三）

目标