从0到1实现 vue3 + pnpm + ant-design-vue 二次封装组件库

由于组件库应用于公司管理系统项目中,技术栈统一是vue3 + ant-design-vue,所以 该组件库只是对ant-design-vue做了业务上的扩展,提升工作中的开发效率,该组件库不做打包,直接发布源码到私有仓库,这篇文章主要为了记录一下整个过程

文章提交规范部分参考文章

文章中全部代码pnpm-vue3-ui-template

项目初始化

mkdir pnpm-vue3-ui-template

pnpm init

// 修改包名 package.json
"name": "@zhj/component"

// 在根目录创建packages文件夹,组件代码都放在这个目录下面

关联远程仓库

  • 初始化 git

    git init
    
  • 创建 .gitignore 文件,忽略 node_modules 文件夹

    node_modules
    
  • github 创建一个仓库,然后根据提示上传代码,这个就不展开讲了

代码规范 editorconfig + eslint + prettier

集成editorconfig

  • EditorConfig 有助于为不同编辑器配置的开发人员处理同一项目保持一致的编码风格

  • 在根目录下添加.editorconfig文件

    root = true
    
    [*] # 表示所有文件适用
    charset = utf-8
    indent_style = tab
    indent_size = 2
    end_of_line = lf # 换行类型(lf | cr | crlf)
    trim_trailing_whitespace = true # 去除行首的任意空白字符
    insert_final_newline = true # 始终在文件末尾插入一个新行
    
  • VSCode需要安装一个插件:EditorConfig for VS Code,才能读取.editorconfig文件

集成prettier

  • 安装 prettier

    pnpm install prettier -D
    
  • 添加 .prettierrc 文件

    {
        "useTabs": false,
        "tabWidth": 2,
        "printWidth": 80,
        "singleQuote": true,
        "trailingComma": "none",
        "semi": false
    }
    
  • 创建 .prettierignore 忽略文件

    # Ignore artifacts:
    
    /dist/*
    .local
    .output.js
    /node_modules/**
    pnpm-lock.yaml
    .stylelintrc.json
    CHANGELOG.md
    
    **/*.svg
    **/*.sh
    
    /public/*
    
  • VSCode 需要安装 prettier 的插件

集成 ESLint

  • 创建 eslint 配置文件

    npx eslint --init
    

    从0到1实现 vue3 + pnpm + ant-design-vue 二次封装组件库

  • 添加 .eslintignore 文件

    /build/
    /config/
    /dist/
    /*.js
    zh_CN.js
    /static
    /lib
    pnpm-lock.yaml
    .stylelintrc.json
    CHANGELOG.md
    
  • packages.json 中添加 lint 命令

    "scripts": {
       ...
       "lint": "eslint"
       ...
    },
    

实际开发中发现 eslint 和 prettier 有格式冲突,所以在 .eslintrc.js 中修改了一些规则

...
rules: {
    semi: 'off', // 不需要结尾分号
    'max-len': ['error', 120],
    'vue/no-multiple-template-root': 'off', // 关闭多根节点的校验
    'import/prefer-default-export': 'off', // 允许单个文件只有一个 export
    'comma-dangle': 'off' // 不需要结尾逗号
}

vscode 插件推荐

  • 代码校验需要用到vscode的三个插件 eslint、prettier、EditorConfig for VS Code
  • 这里添加一下插件推荐配置,没有安装这些插件的人打开项目,vscode会自动提示安装插件
  • 根目录创建 .vscode/estensions.json 文件
    {
        "recommendations": [
          "editorconfig.editorconfig",
          "baeumer.vscode-eslint",
          "esbenp.prettier-vscode"
        ]
    }
    
  • 再创建 .vscode/settings.json 文件,开启保存时格式化代码
    {
        "editor.formatOnSave": true
    }
    

代码提交校验

lint-staged

  • 安装 lint-staged
    pnpm add lint-staged -D
    
  • 安装完成之后在package.json内新增配置
    "lint-staged": {
        "*.{js,ts,vue}": "pnpm run lint"
    },
    

husky

  • 安装 husky
    pnpm add husky -D
    
  • 创建 husky 配置
    // 执行下面命令,完毕之后会自动生成一个.husky的文件夹
    npx husky install
    
    // 我们在.husky文件夹中新建两个文件:
    // commit-msg 校验提交信息
    // pre-commit commit前代码的校验
    
    // commit-msg 文件
    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"
    
    npx commitlint --edit $1
    
    
    // pre-commit
    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"
    
    npx lint-staged --allow-empty $1
    
  • 安装 commitlint
    pnpm add @commitlint/cli @commitlint/config-conventional -D
    
  • 在项目根目录新建一个 commitlint.config.js
    module.exports = {
        extends: ['@commitlint/config-conventional']
    }
    

使用 git-cz 提交代码

  • 安装

    pnpm add git-cz -D
    
  • 配置 package.json

    "scripts": {
        ...
        "commit": "git-cz"
        ...
    }
    "config": {
        "commitizen": {
            "path": "git-cz"
        }
    }
    
  • 自定义 commit 类型,根目录创建 changelog.config.js 文件

    module.exports = {
        disableEmoji: false,
        list: [
          'test',
          'feat',
          'fix',
          'chore',
          'docs',
          'refactor',
          'style',
          'ci',
          'perf',
          'release',
          'revert',
          'build'
        ],
        maxMessageLength: 64,
        minMessageLength: 3,
        questions: [
          'type',
          'scope',
          'subject',
          'body',
          'breaking',
          'issues',
          'lerna'
        ],
        scopes: [],
        types: {
          chore: {
            description: 'Chore | 构建/工程依赖/工具',
            emoji: '🚀', // 当前类型的commit所显示的表情
            value: 'chore'
          },
          ci: {
            description: 'Continuous Integration | CI 配置',
            emoji: '👷',
            value: 'ci'
          },
          docs: {
            description: 'Documentation | 文档',
            emoji: '✏️ ',
            value: 'docs'
          },
          feat: {
            description: 'Features | 新功能',
            emoji: '✨',
            value: 'feat'
          },
          fix: {
            description: 'Bug Fixes | Bug 修复',
            emoji: '🐛',
            value: 'fix'
          },
          perf: {
            description: 'Performance Improvements | 性能优化',
            emoji: '⚡',
            value: 'perf'
          },
          refactor: {
            description: 'Code Refactoring | 代码重构',
            emoji: '♻️ ',
            value: 'refactor'
          },
          release: {
            description: 'Create a release commit | 发版提交',
            emoji: '🏹',
            value: 'release'
          },
          style: {
            description: 'Styles | 风格',
            emoji: '💄',
            value: 'style'
          },
          revert: {
            description: 'Revert | 回退',
            emoji: '⏪',
            value: 'revert'
          },
          build: {
            description: 'Build System | 打包构建',
            emoji: '📦',
            value: 'build'
          },
          test: {
            description: 'Tests | 测试',
            emoji: '✅',
            value: 'test'
          }
        }
    }
    
  • 这样团队统一使用 commit 命令提交代码更标准化

    git add .
    
    // commit 时根据提示填写 commit 信息
    pnpm commit
    

    从0到1实现 vue3 + pnpm + ant-design-vue 二次封装组件库

代码发版

自动生成 CHANGELOG

  • CHANGELOG 会记录 feat & fix 类型的commit信息,能快速看到某一个版本做了哪些功能或修复了哪些bug
  • 安装 standard-version
    pnpm add standard-version -D
    
  • package.json 添加命令
    // major 大版本更新,minor 较小版本更新,patch 更新补丁
    "scripts": {
        ...
        "release-major": "standard-version --release-as major",
        "release-minor": "standard-version --release-as minor",
        "release-patch": "standard-version --release-as patch",
        ...
    }
    
  • 根目录新建 .versionrc 文件
    {
        "header": "# 更新日志 \n\n",
        "types": [
          {
            "type": "feat",
            "section": "✨ Features | 新功能",
            "hidden": false
          },
          {
            "type": "fix",
            "section": "🐛 Bug Fixes | Bug 修复",
            "hidden": false
          },
          {
            "type": "init",
            "section": "🎉 Init | 初始化",
            "hidden": true
          },
          {
            "type": "docs",
            "section": "✏️ Documentation | 文档",
            "hidden": false
          },
          {
            "type": "style",
            "section": "💄 Styles | 风格",
            "hidden": true
          },
          {
            "type": "refactor",
            "section": "♻️ Code Refactoring | 代码重构",
            "hidden": true
          },
          {
            "type": "perf",
            "section": "⚡ Performance Improvements | 性能优化",
            "hidden": true
          },
          {
            "type": "test",
            "section": "✅ Tests | 测试",
            "hidden": true
          },
          {
            "type": "revert",
            "section": "⏪ Revert | 回退",
            "hidden": true
          },
          {
            "type": "build",
            "section": "📦‍ Build System | 打包构建",
            "hidden": true
          },
          {
            "type": "chore",
            "section": "🚀 Chore | 构建/工程依赖/工具",
            "hidden": true
          },
          {
            "type": "ci",
            "section": "👷 Continuous Integration | CI 配置",
            "hidden": true
          }
        ]
    }
    
  • 执行命令即可生成 CHANGELOG ,同时会创建 tag、更新 package.json 中的版本号
    // 大版本更新(较大版本更新)
    pnpm release-major
    
    // 小版本更新(较小版本更新)
    pnpm release-minor
    
    // 更新补丁(修改bug)
    pnpm release-patch
    

到这里一个具备 代码格式检测&提交规范 的代码仓就配置好了,接下来就是组件库的开发过程

组件的开发及发布

组件目录结构

从0到1实现 vue3 + pnpm + ant-design-vue 二次封装组件库

组件的编写就不展开讲了,主要说一下组件的导出

  • 贴一个组件demo代码,二次封装主要是对ant-design-vue的button组件做了业务扩展
    // packages/components/button/src/button.vue
    <template>
        <a-button type="primary">
          prefix:{{ props.text }}--
          <slot></slot>
        </a-button>
      </template>
    
      <script>
      import { defineComponent } from 'vue'
      import { Button as AButton } from 'ant-design-vue'
      import { buttonProps } from './button'
    
      export default defineComponent({
        name: 'CQButton',
        props: buttonProps,
        components: { AButton },
        setup: (props) => ({ props })
      })
    </script>
    
  • button 组件导出,给组件添加 install 方法
    // packages/components/button/index.js
    import CQButton from './src/button.vue'
    
    CQButton.install = (Vue) => {
        Vue.component(CQButton.name, CQButton)
    }
    
    export default CQButton
    
  • 所有组件的统一导出
    // packages/components/index.js
    import CQButton from './button'
    
    export { CQButton }
    
  • 组件库统一入口
    // packages/index.js
    // 文件中导出了所有工具方法,和所有组件
    // 导出 install 方法,供全局注册时使用
    import * as components from './components'
    
    export * from './utils'
    export * from './components'
    
    export const install = (Vue) => {
      // 注册组件
      Object.entries(components).forEach(([name, component]) =>{
        Vue.component(name, component)
      })
    }
    
    export default { install }
    
  • 配置需要发布的文件:package.json 中添加 files 字段,发布组件库的时候只会发布 files 中包含的文件
    "files": [
      "packages"
    ],
    

组件库发布

  • 执行 release 命令更新组件库版本、创建tag、创建CHANGELOG

    // 根据更新的内容执行不同的命令
    // 大版本更新(较大版本更新)
    pnpm release-major
    
    // 小版本更新(较小版本更新)
    pnpm release-minor
    
    // 更新补丁(修改bug)
    pnpm release-patch
    

    从0到1实现 vue3 + pnpm + ant-design-vue 二次封装组件库

  • 自动生成了CHANGELOG,并且贴上了commit记录
    从0到1实现 vue3 + pnpm + ant-design-vue 二次封装组件库

  • 把tag推到远程库

    git push --follow-tags origin master
    
  • 发布组件库到私有仓库

    npm publish
    

组件库使用方法

  • 组件库 全局注册

    // main.js
    import CQComs from '@zhj/component'
    
    ...
    
    app.use(CQComs)
    
  • 组件库 按需引入

    import { CQButton } from '@zhj/component'
    
    ...
    
    app.use(CQButton)
    
  • 工具方法 引入

    import { testFn } from '@zhj/components'
    

原文链接:https://juejin.cn/post/7239241606527991845 作者:熬夜佩奇

(0)
上一篇 2023年6月1日 上午10:57
下一篇 2023年6月1日 上午11:07

相关推荐

发表回复

登录后才能评论