React 组件库搭建指南-准备工做

• React 组件库搭建指南-准备工做
• React 组件库搭建指南-开发调试
• React 组件库搭建指南-打包输出

凡事预则立不预则废。

概览

本系列文章主要是开发组件库dora-ui过程当中的一些经验总结，大体包含如下内容：

• prepare: 组件库前期开发准备工做。eslint/commit lint/typescript等等；
• dev: 使用docz进行开发调试以及文档编写；
• build: umd/cjs/esm、types、polyfill 以及按需加载；
• deploy: 使用now部署文档站点；
• publish: 发布组件库至npm；
• others: 组件测试

注意：.gitignore、.eslintignore以及.editorconfig等更多文件可在chapter-1章节代码中获取。

初始化项目

新建一个happy-ui文件夹，并初始化。

mkdir happy-ui

cd happy-ui

npm init --y

mkdir components && cd components && touch index.ts # 新建源码文件夹以及入口文件

复制代码

代码规范

此处直接使用@umijs/fabric的配置。

yarn add @umijs/fabric --dev

yarn add prettier --dev # 由于@umijs/fabric没有将prettier做为依赖 因此咱们须要手动安装
复制代码

.eslintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
};
复制代码

.prettierrc.js

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
};
复制代码

.stylelintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
};
复制代码

想自行配置的同窗能够参考如下文章：

• Linting Your React+Typescript Project with ESLint and Prettier!
• 使用 ESLint+Prettier 规范 React+Typescript 项目

Commit Lint

进行pre-commit代码规范检测。

yarn add husky lint-staged --dev
复制代码

package.json

"lint-staged": {
  "components/**/*.ts?(x)": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ],
  "components/**/*.less": [
    "stylelint --syntax less --fix",
    "git add"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
复制代码

进行 Commit Message 检测。

yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog --dev
复制代码

新增.commitlintrc.js写入如下内容

module.exports = { extends: ['@commitlint/config-conventional'] };
复制代码

package.json 写入如下内容：

// ...
"scripts": {
  "commit": "git-cz",
}
// ...
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
  }
},
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}
复制代码

后续使用 yarn commit 替代 git commit生成规范的 Commit Message，固然为了效率你能够选择手写，可是要符合规范。

TypeScript

yarn add typescript --dev
复制代码

新建tsconfig.json并写入如下内容

{
  "compilerOptions": {
    "allowJs": false,
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "outDir": "types",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["components"]
}
复制代码

测试

在components文件夹下新建alert文件夹，目录结构以下：

alert
    ├── alert.tsx           # 源文件
    ├── index.ts            # 入口文件
    ├── interface.ts        # 类型声明文件
    └── style
        ├── index.less      # 样式文件
        └── index.ts        # 样式文件里为何存在一个index.ts - 按需加载样式 管理样式依赖 后面章节会提到
复制代码

安装React相关依赖：

yarn add react react-dom @types/react @types/react-dom --dev # 开发时依赖，宿主环境必定存在

yarn add prop-types            # 运行时依赖，宿主环境可能不存在 安装本组件库时一块儿安装
复制代码

此处依旧安装了prop-types这个库，由于没法保证宿主环境也使用typescript，从而可以进行静态检查，故使用prop-types保证javascript用户也能获得友好的运行时报错信息。

components/alert/interface.ts

export type Kind = 'info' | 'positive' | 'negative' | 'warning';
export type KindMap = Record<Kind, string>;

export interface AlertProps {
  /** * Set this to change alert kind * @default info */
  kind?: 'info' | 'positive' | 'negative' | 'warning';
}
复制代码

components/alert/alter.tsx

import React from 'react';
import t from 'prop-types';

import { AlertProps, KindMap } from './interface';

const prefixCls = 'happy-alert';

const kinds: KindMap = {
  info: '#5352ED',
  positive: '#2ED573',
  negative: '#FF4757',
  warning: '#FFA502',
};

const Alert: React.FC<AlertProps> = ({ children, kind = 'info', ...rest }) => (
  <div className={prefixCls} style={{ background: kinds[kind], }} {...rest} > {children} </div>
);

Alert.propTypes = {
  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
};

export default Alert;
复制代码

components/alert/index.ts

import Alert from './alert';

export default Alert;

export * from './interface';
复制代码

components/alert/style/index.less

@popupPrefix: happy-alert;

.@{popupPrefix} {
  padding: 20px;
  background: white;
  border-radius: 3;
  color: white;
}
复制代码

components/alert/style/index.ts

import './index.less';
复制代码

components/index.ts

export { default as Alert } from './alert';
复制代码

此处组件参考的docz项目typescript以及less示例。

git 一把梭，能够看到控制台已经进行钩子检测了。

git add .

yarn commit  # 或 git commit -m'feat: chapter-1 准备工做'

git push
复制代码

准备工做结束，欢迎指点交流。

To be Continued...