@perfma/heaven

An UI Framework base Ant Design V4 for React.

开始使用

• 安装

  npm i  @perfma/heaven

• 已经支持按需加载样式（使用 babel-import-plugin）, 请剔除之前 prefixCls 和 @antd-prefix

  import { Button } from '@perfma/heaven';
  ↓  ↓  ↓  ↓
  import { Button } from '@perfma/heaven';
  import '@perfma/heaven/lib/button/style/index.less';
  import 'antd/lib/button/style.less';
  

• babel-import-plugin 配置说明：（修改 babel.config）

  [
    'import',
  
    {
      libraryName: '@perfma/heaven',
      libraryDirectory: 'es',
      style: true,
      customStyleName: (name) => `@perfma/heaven/es/${name}`,
    },
  ]
  

• heaven less 变量替换，请在 less loader 中进行变量替换

    // 加入以下配置文件，未来在工程化中会统一集成
    const vars = require('./modifyvars.js')
    // less loader 配置
    lessOptions:{
      javascriptEnabled: true,
      modifyVars : vars
    }

  //modifyvars.js
  const fs = require('fs');
  const path = require('path');
  
  const fileHeaven = fs.readFileSync(
    path.resolve(
      __dirname,
      '..',
      'node_modules/@perfma/heaven/es/style/vars.less',
    ),
    'utf8',
  );
  const vars = {};
  fileHeaven.split('\n').forEach((line) => {
    if (line.indexOf('@import') !== 0) {
      if (line.indexOf('@') === 0) {
        line = line.split('//')[0].replace(';', '');
        const temp = line.split(':');
        const name = temp[0];
        const value = temp[1];
        vars[name] = value;
      }
    }
  });
  // vars['@ant-prefix'] = 'heaven'; // 可在此处自定义 ant-prefix，默认值 heaven
  
  module.exports = vars;

• 由于是按需加载，存在 less 文件多次依赖引入以及在开发环境中 src 中样式被覆盖问题，需要进行如下配置：

  • 1、工程化中 rules 配置如下：

     {
        // heaven 等组件打包成common.css,第一优先级打包
        test: /\.less|css$/,
        include: /node_modules|heaven|antd/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['postcss-preset-env']],
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
                modifyVars,
              },
            },
          },
        ],
      },
      {
        // 如果是生产环境则，打包CSS，否则走style-loader
        test: /\.less|css$/,
        include: /src/,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['postcss-preset-env']],
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
                modifyVars,
              },
            },
          },
        ],
      },

  • 2、需要开启 common(heaven,antd)css 优先打包，即先加载组件库样式，再走业务组件样式，比如：

    <button class="heaven-btn btn-diy">demo</button>
    会先加载heaven-btn样式，再加载btn-diy样式

    优先级配置如下：

      optimization: {
        splitChunks: {
          chunks: 'all',
          minChunks: 1,
          cacheGroups: {
            // this is most important!!
            commonStyles: {
              name: 'common',
              test: (module) => {
                const name = module.nameForCondition && module.nameForCondition();
                if (
                  name &&
                  ((/node_modules\/@perfma\/heaven/.test(name) &&
                    /.(c|le)ss$/.test(name)) ||
                    (/node_modules\/antd/.test(name) && /.(c|le)ss$/.test(name)))
                ) {
                  return true;
                }
    
                return false;
              },
              chunks: 'all',
              type: 'css/mini-extract',
              enforce: true,
              priority: 999, // 最高优先级
            },
            styles: {
                name: 'biz', // 可以重命名，可以是xsea/testma
                type: 'css/mini-extract',
                chunks: 'all',
                enforce: true,
            },
          },
        },
      }

    • 3、开启去重插件，请在 webpack plugins 安装如下插件

    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
    plugins: [...new CssMinimizerPlugin()];

• 开始使用

  除部分组件的扩展能力外，其他使用方法与 Ant Design 一致。

  import React from 'react';
  import { Input } from '@perfma/heaven';
  
  export default () => <Input placeholder="please input" limit={20} />;

改造组件

仅对样式进行了自定义修改

• [x] Alert
• [x] Badge
• [x] Breadcrumb
• [x] Button
• [x] Card
• [x] Cascader
• [x] DatePicker
• [x] Drawer
• [x] Empty
• [x] Form
• [x] InputNumber
• [x] Message
• [x] Menu
  • [x] themes, layouts
  • [ ] resize?
• [x] Modal
• [x] Notification
• [x] Pagination
• [x] Popconfirm
• [x] Popover
• [x] Progress
• [x] Select
• [ ] Skeleton
• [ ] Slider
• [ ] Spin
• [x] Switch
• [x] Transfer
• [x] Tree
• [x] TreeSelect
• [x] Tabs
• [x] Tag
• [x] TimePicker
• [ ] Timeline
• [ ] Tooltip
  • [ ] dark 模式
• [ ] Upload

扩展组件

新增组件，以及对原有组件新增功能

• Checkbox
• Input
• LetterIndexList
• Radio
• Table
• Toast
• Tooltip.Ellipsis

文档发布

构建文档并发布到http://heaven.perfma-inc.com

1. 完成开发后，当前分支打一个docs/***的 tag，比如 docs/202108202034
2. 推送 tag 到 gitlab，触发 gitlab-ci 进行发布