zat-design-pro-component

快速上手

西西弗基于 antd@4 版本开发

安装

npm 或 yarn 安装

# npm
$ npm install @zat-design/sisyphus-react --save

# yarn
$ yarn add @zat-design/sisyphus-react

按需加载

采用 babel-plugin-import 方式

[
  'babel-plugin-import',
      {
        libraryName: '@zat-design/sisyphus-react',
        camel2DashComponentName:false,
        libraryDirectory: 'es',
        style: false,
      },
],

以下为在 umi 框架下配置按需加载，同时也配置 antd 的按需加载情况下,再配置一个 babel-plugin-import 时需要配置一个别名，可参考下面

 extraBabelPlugins: [
    [
      'babel-plugin-import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
    [
      'babel-plugin-import',
      {
        libraryName: '@zat-design/sisyphus-react',
        camel2DashComponentName:false,
        libraryDirectory: 'es',
        style: false,
      },
      '@zat-design/sisyphus-react'
    ],
  ]

使用

1. 可通过 npm 包进行引用

import React from 'react';
import { render } from 'react-dom';
import { ProForm } from '@zat-design/sisyphus-react';

const App = () => {
  return (
    <ProForm
      columns={[
        {
          type: 'Input',
          label: '姓名',
          name: 'name',
          rules: [{ required: true, message: '请输入姓名！' }],
        }]}
    />
  );
};

render(<App />, document.getElementById('root'));

2. 如组件无法满足业务场景使用，但大部分可复用可联系我们进行补充调整，也可以单独 copy 进行调整

组件库打包发布

1. build:types 生成类型文件
2. build:es 生产 es6 代码文件 module 指向该文件
3. build:lib 生产 es5 代码文件 main 指向该文件
4. release: "yarn build:types & yarn build:es && yarn build:lib && npm publish" 打包 3 个文件进行发布
5. 执行 yarn build 成功
6. 执行 yarn release

发布

npm publish --registry https://registry.npmjs.org --access=public