Element-plus-react组件库开发指北写在前面本文可能无法教会你从0开发一个组件库，出于作者是出于学习的目

写在前面

本文可能无法教会你从0开发一个组件库，出于作者是出于学习的目的开发此项目，第一次写文章，不喜勿喷~另外希望对此组件库感兴趣的小伙伴可以加入我们一起学习、一起开发完善Element-plus-react。

ElementPlusReact组件库链接，希望多多支持~加入我们，做大做强！再创辉煌！

初始化项目

技术选型

dumi
rollup

制定目录结构

 - config // dumi配置项
 - docs // 文档目录
 - packages
     - components // 组件
     - element-plus-react // 打包、发布专用文件夹
     - hooks
     - play
     - utils
 - typings

开发一个简单的Button组件

由于组件代码太多，无法全部展示，代码点我可看~

-button
  - demos
  - style
    - index.ts
  - button-group.tsx
  - button.tsx
  - index.tsx
  - index.md

为Button组件编写demo

在组件文件夹下新建demos文件夹由于我们使用了yarn workspace，并在子包element-plus-react内引入了全部组件, 所以我们可以在这里方便的使用 import { Button } from 'element-plus-react'

import React from "react";
import { Button, Row } from 'element-plus-react'

export default () => (<>
    <Row className="mb-4">
      <Button>Default</Button>
      <Button type="primary">Primary</Button>
      <Button type="success">Success</Button>
      <Button type="info">Info</Button>
      <Button type="warning">Warning</Button>
      <Button type="danger">Danger</Button>
      <Button>中文</Button>
    </Row>

    <Row className="mb-4">
      <Button plain>Plain</Button>
      <Button type="primary" plain>Primary</Button>
      <Button type="success" plain>Success</Button>
      <Button type="info" plain>Info</Button>
      <Button type="warning" plain>Warning</Button>
      <Button type="danger" plain>Danger</Button>
    </Row>

    <Row className="mb-4">
      <Button round>Round</Button>
      <Button type="primary" round>Primary</Button>
      <Button type="success" round>Success</Button>
      <Button type="info" round>Info</Button>
      <Button type="warning" round>Warning</Button>
      <Button type="danger" round>Danger</Button>
    </Row>
  </>)

使用Dumi快捷的编写Button组件文档

在index.md文件内增加 --- xxx ---，用于确定文档菜单的顺序、位置，dumi内置了 <code></code> 和<API><API/>组件，<code/>组件来引入demo，<API/>组件来引入组件的api文档，灰常的方便~详情见下。

---
title: Button 按钮
order: 1
nav:
  title: 组件
  path: /components
group:
  title: Basic 基础组件
  order: 1
---

# Button 按钮

常用的操作按钮。

## 基础用法

<code src="./demos/basic.tsx" desc="使用 `type`、`plain`、`round` 和 `circle` 来定义按钮的样式。"></code>

<API src="./index.tsx"></API>

使用rollup打包Element-plus-react组件库

首先我们在子包element-plus-react引入了所有组件，我们需要在这里进行打包操作，新建rollup.config.js文件来配置打包~

import clear from 'rollup-plugin-delete'
import copy from 'rollup-plugin-copy'
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import jsx from 'acorn-jsx';
import typescript from "rollup-plugin-typescript2";
import resolve from "@rollup/plugin-node-resolve";
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'

const extensions = ['js','ts','tsx','json']

export default {
  input: "./index.ts",
  output: [
    {
      dir: 'lib',
      format: 'cjs',
      name: 'ElementPlusReact',
      preserveModules: true,
      exports: 'named',
      global: {
        react: 'React',
        lodash: '_',
      },
    },
    {
      dir: 'es',
      format: 'es',
      preserveModules: true,
      exports: 'named',
    },
  ],
  acornInjectPlugins: [jsx()],
  plugins: [
    clear({ targets: ["lib", "es", "dist"] }),
    typescript({
      jsx: 'preserve' ,
      check: false,
      exclude: ["node_modules", "lib", "es","*/demos/*"],
    }),
    resolve(),
    commonjs(),
    babel({
      presets: ['@babel/preset-react'],
      babelHelpers: 'bundled',
      exclude: '**/node_modules/**',
      extensions,
    }),
    postcss({
      plugins: [
        autoprefixer(),
        cssnano(),
      ],
      extract: true,
    }),
    copy({
      targets: [
        {
          src: '../../README.md',
          dest: './',
        },
        {
          src: 'es/index.css',
          dest: 'dist',
        },
      ],
      hook: 'writeBundle',
      verbose: true,
    }),
    clear({
      targets: ['lib/index.css','es/index.css'],
      hook: 'closeBundle',
      verbose: true,
    }),
  ],
  external: [
    "@ant-design/icons",
    "@ctrl/tinycolor",
    'ahooks',
    'classnames',
    "dayjs",
    'react',
    'lodash',
    'react-transition-group',
  ],
}

使用GitHub action发布Element-plus-react组件库

使用GitHub action在我们打tag后，触发action自动发布到npm，如何使用请点传送门

# action名称
name: Push Release

# 当代码合并到master分支的时候，执行下列脚本
on:
  push:
    tags:
      - 'v*'

# 任务
jobs:
  # publish-npm任务
  publish-npm:
    # 在ubuntu最新版本的虚拟机执行
    runs-on: ubuntu-latest
    steps:
      # 检查并切换到master分支
      - name: 检查master分支
        # 使用actions/checkout插件
        uses: actions/checkout@v2

      # 安装node
      - name: 设置Node.js
        # 使用actions/setup-node插件
        uses: actions/setup-node@v2
        with:
          # node版本
          node-version: '14'
          cache: 'yarn'

      - name: Run npm scripts
        run: |
          node -v
          yarn -v
          yarn install
          yarn run build
      # 发布NPM包
      - name: 发布NPM包
        # 执行发布代码
        run: |
          npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
          cd packages/element-plus-react
          npm publish
        env:
          # 配置 npm access token 环境变量
          NPM_TOKEN: ${{secrets.NPM_ACCESS_TOKEN}}

使用GitHub action发布Element-plus-react文档

使用GitHub action在我们更新master代码后，自动打包文档并部署到github-pages，如何使用请点传送门

name: github pages

on:
  push:
    branches:
      - master # default branch

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'
          cache: 'yarn'
      - name: Run npm scripts
        run: |
          node -v
          yarn -v
          yarn install
          yarn run build:docs
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Element-plus-react组件库开发指北