easy-do-it

快速上手

基于 antd@4 版本开发

安装

npm 或 yarn 安装

# npm
$ npm install easy-do-it --save

# yarn
$ yarn add easy-do-it

按需加载

采用 babel-plugin-import 方式

[
  'babel-plugin-import',
      {
        libraryName: 'easy-do-it',
        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: 'easy-do-it',
        camel2DashComponentName:false,
        libraryDirectory: 'es',
        style: false,
      },
      'easy-do-it'
    ],
  ]

使用

• 可通过 npm 包进行引用

import React from 'react';
import { render } from 'react-dom';
import { ProForm } from 'easy-do-it';

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

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

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

组件库打包发布

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