返回

使用 dumi 创建组件库(下)

前端

使用 dumi 创建组件库(上) 一文中,我们介绍了 dumi 的基本使用、如何使用 lerna 管理多个包,以及如何使用 prettier 和 eslint 配置代码风格。本文将继续介绍如何使用 git hooks 和 commitlint 配置提交规范。

git hooks

git hooks 允许我们在特定事件发生时执行自定义脚本。在组件库开发中,我们可以使用 git hooks 来强制执行代码风格、运行测试或生成文档。

要创建 git hook,只需在项目根目录的 .git/hooks 目录中创建文件并赋予它可执行权限即可。例如,要创建一个在提交前运行 prettier 格式化代码的 git hook,我们可以创建 .git/hooks/pre-commit 文件,内容如下:

#!/bin/sh
yarn prettier --write src

commitlint

commitlint 是一个工具,它可以帮助我们强制执行提交消息的格式和内容。这有助于保持提交历史记录的整洁性和可读性。

要使用 commitlint,我们需要安装它:

yarn add --dev @commitlint/cli

然后,我们需要创建一个配置文件 .commitlintrc.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'refactor', 'docs', 'style', 'test', 'chore', 'revert'],
    ],
  },
};

此配置文件指定我们希望使用常规提交规范。它还强制要求提交类型为以下之一:feat、fix、refactor、docs、style、test、chore 或 revert。

要使用 commitlint,我们可以运行以下命令:

npx commitlint --edit

这将在编辑器中打开提交消息,commitlint 会根据我们的配置提供反馈。

总结

以上就是使用 dumi 创建组件库时一些有用的技巧和工具。通过使用 lerna、prettier、eslint、git hooks 和 commitlint,我们可以确保代码质量、提交规范性和开发流程的顺畅性。

希望这篇文章对您有所帮助。如果您有任何问题或建议,请随时给我留言。