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...