【01】从0到1实现 Ant Design Mobile 库

舜岳
503 阅读4分钟

从0到1实现 Ant Design Mobile 库

本系列从0到1实现一个 1:1 的 Ant Design Mobile UI 库，学习大佬们是如何编写一个 web Mobile 组件库的。组件库文档地址：uab-ui-mobile.netlify.app image.png

初始化目录结构：

├── .dumi                     dumi组件文档静态网站样式文件
├── .husky                    Husky是一个工具，在git提交代码前运行我们想要的脚本
├── .vscode                   给vscode自定义一些设置，比如保存自动格式化
├── config                    存放.dumirc.ts里面的一些配置文件
├── dist                      打包后的组件库代码，用于npm安装引入使用
│   ├── cjs                   Commonjs导出规范的版本: require/exports
│   ├── esm                   ESModule导出规范的版本: import/export
│   └── umd                   全局引入版本
├── docs                      组件库文档代码
├── scripts                   存放一些自定义插件
├── src                       组件库开发目录
│   ├── button                button组件样式代码
│   │   ├── demos             button组件文档案例
│   │   ├── button.less       button组件css样式代码
│   │   ├── button.tsx        button组件逻辑代码
│   │   ├── index.ts          导出button组件，暴露给用户使用
│   │   ├── index.zh.md       button中文文档，见：https://uab-ui-mobile.netlify.app/components/button
│   │   └── index.en.md       button英文文档，见；https://uab-ui-mobile.netlify.app/components/button
│   ├── ...                   各组件代码
│   ├── theme                 组件库主题色
│   │   ├── theme-default.less默认基础色调
│   │   ├── theme-default.less夜间主题色调
│   │   └── theme.less        其他全局通用样式
│   ├── utils                 全局公用方法
│   └── index.ts              项目入口文件, 导出所有组件供用户引入
|
├── website                   组件库文档代码打包的产物，直接部署的文档：https://uab-ui-mobile.netlify.app
├── .dumirc.ts                dumi配置文件，用于生成组件库文档
├── .editorconfig             格式化比较基础的代码
├── .eslintrc.js              eslint配置文件，用来检查你的代码是否符合指定的规范
├── .fatherrc.ts              father组件库打包配置文件
├── .gitignore                npm提交忽略文件
├── .npmrc                    安装依赖配置需求
├── .prettierignore           prettier格式化代码忽略文件
├── .prettierrc.js            配置prettier格式化代码规则
├── commitlint.config.js      配置git commit提交书写规范
├── LICENSE                   项目开源协议
├── package.json              项目依赖管理文件
├── README.md                 项目 GitHub 首页说明文档
└── tsconfig.json             typescript项目配置文件，配置ts校验规则

项目使用到的库说明：

dumi

简介：

dumi 是一款为组件开发场景而生的静态站点框架，与 father 一起为开发者提供一站式的组件开发体验，father 负责组件源码构建，而 dumi 负责组件开发及组件文档生成。

使用：

// 先找个地方建个空目录。
$ mkdir myapp && cd myapp
// 通过官方工具创建项目，选择你需要的模板
npx create-dumi
// 安装依赖后启动项目
npm start

package.json 添加打包

{
  ...
  "scripts": {
    "start": "dumi dev",        // 启动文档
    "build-docs": "dumi build", // 打包文档
  },
  ...
}

father

简介：

father 是一款 npm 包研发工具，能够帮助开发者更高效、高质量地研发 npm 包、生成构建产物、再完成发布。

使用：

  1. 安装 father
npm install father
  1. 编写配置文件 .fatherrc.ts
import { defineConfig } from 'father'
import path from 'path'

// 配置项文档：https://github.com/umijs/father/blob/master/docs/config.md
export default defineConfig({
  input: 'src',   // 默认打包目录：
  output: 'dist', // 默认打包输出目录
  esm: {}, // 需要打ESModule包
  cjs: {}, // 需要打Commonjs包
  umd: {}, // 需要打umd全局引入包
  alias: { // 自定义引入别名
    '@': path.resolve(__dirname, './src'),
  },
  platform: 'browser', // 包使用平台浏览器
  plugins: ['./scripts/publish-father-plugin'], // 打包插件
})
  1. package.json 添加打包命令
{
  ...
  "scripts": {
    "build": "father build",
  },
  ...
}

husky

简介：

husky 是一个工具，它允许我们轻松地处理 Git Hooks 并在提交代码时运行我们想要的脚本

使用：

  1. 安装并初始化 husky
npx husky-init && pnpm install
  1. 添加一个 git 钩子
npx husky add .husky/commit-msg 'pnpm commitlint --edit $1'

添加完成后会生成 .husky/commit-msg 文件如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm commitlint --edit $1

当你 git commit 提交代码时会执行 pnpm commitlint 命令，通过 commitlint.config.js 配置规则校验你的 commit 内容是否规范

Prettier

简介：

Prettier 是一款流行的代码格式化工具。 它支持的语言相当多。 它很纯粹，就一个代码格式化工具，并不会做代码质量的检查（比如声明了一个未被使用的变量）。 Prettier 会强制使用统一的代码风格，原理就是解析语言生成AST 抽象语法树，然后用自己的一套风格写回到文件。

使用：

  1. 安装
pnpm install --save-dev --save-exact prettier
  1. 编写配置文件 .prettierrc.js, 配置项说明
module.exports = {
  printWidth: 100,       // 指定换行的行长度。
  semi: false,           // 不在语句末尾打印分号。
  trailingComma: 'es5',  // 在ES5（对象、数组等）中添加有效的结尾逗号。TypeScript中的类型参数中没有结尾逗号。
  tabWidth: 2,           // 指定每个缩进级别的空格数。
  singleQuote: true,     // 字符串统一使用单引号
  bracketSameLine: false,// 元素不是位于最后一行的末尾，而是单独位于下一行
  jsxSingleQuote: true,  // 在JSX中使用单引号而不是双引号。
  arrowParens: 'avoid',  // 避免在唯一的箭头函数参数周围包含括号。
  proseWrap: 'never',    // 将每一段markdown文本拆分成一行。
}
  1. 添加 git 钩子
npx husky add .husky/pre-commit 'pnpm pretty-quick --staged'

添加完成后会生成 .husky/pre-commit 文件如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm pretty-quick --staged

当你 git commit 提交代码前会先执行 pnpm pretty-quick --staged 命令，通过 .prettierrc.js 配置规则校验并修复不符合规则的代码内容

eslint

简介：

eslint 是一种用于识别和报告 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是查找并修复代码中的问题使代码更加一致并避免错误。

使用：

  1. 安装
// 安装 eslint
pnpm install --save-dev eslint
// 安装 react 的 eslint 推荐规则
pnpm install --save-dev eslint-plugin-react
// 安装 prettier 的 eslint 配置文件与插件，目的将 pretier 规则转为 esLint 规则运行，合并两边不统一的一些规则
pnpm install --save-dev eslint-config-prettier eslint-plugin-prettier
// 安装 eslint 的 typescript 解析器与插件推荐规则
pnpm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  1. 编写配置文件 .eslintrc.js
module.exports = {
  root: true, // 当前是根 eslint 配置
  env: {      // 代码运行环境
    browser: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',       // eslint 自身推荐的规则
    'plugin:react/recommended', // eslint-plugin-react 内的规则
    'plugin:@typescript-eslint/eslint-recommended', // @typescript-eslint/eslint-plugin 内推荐的 eslint 规则
    'plugin:@typescript-eslint/recommended',        // @typescript-eslint/eslint-plugin 内的规则
    'plugin:prettier/recommended',     // eslint-plugin-prettier 内的规则，内已导入了 eslint-config-prettier 内配置的兼容react/@typescript-eslint/...的规则
  ],
  parser: '@typescript-eslint/parser', // 解析器，用于解析 ts 文件
  parserOptions: {                     // 解析器配置
    project: 'tsconfig.json',          // 解析器配置文件
    sourceType: 'module',              // 需要解析器解析的代码类型，代码是 ECMAScript 模块填 module
  },
  plugins: ['@typescript-eslint'],     // 引入 @typescript-eslint/eslint-plugin 内的插件规则函数
  rules: {
    // 规则查询文档：https://eslint.org/docs/latest/rules
    'no-empty': ['error', { allowEmptyCatch: true }], // 不允许空块语句,排除空catch语句。文档：https://eslint.org/docs/latest/rules/no-empty
    '@typescript-eslint/no-explicit-any': 'off',      // 关闭不允许 any 类型。         文档：https://typescript-eslint.io/rules/no-explicit-any
    'no-prototype-builtins': 'off',                   // 关闭不允许直接对对象调用Object.prototype方法。文档：https://eslint.org/docs/latest/rules/no-prototype-builtins
    'react/display-name': 'off',                      // 关闭不允许React组件定义中缺少displayName。   文档：https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md
  },
  settings: { // 在所有插件规则中共享的设置
    react: {
      version: 'detect', // React版本。"detect"会自动选择您已安装的版本。
    },
  },
  ignorePatterns: ['/*', '!/src', '/src/**/*.js'], // eslint规则忽略的文件
}
  1. package.json 添加规则校验命令
{
  ...
  "scripts": {
     "lint": "eslint .",
  },
  ...
}
  1. vscode 安装 dbaeumer.vscode-eslint 插件，设置保存时自动通过 eslint 规则格式化文件

.vscode/settings.json文件：

{
    "editor.formatOnSave": true,     // 开启保存时格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存时通过项目 .eslintrc.js 配置自动格式化代码
    },
}
本文代码代码链接
GitHubgithub.com/uabjs/uab-u…
Giteegitee.com/shunyue/uab…
avatar
文章
阅读
粉丝