springboot+activiti7+react实现模仿钉钉功能的审批流(三、搭建react前端框架)

前端使用react技术栈，项目搭建使用umi
https://umijs.org/zh-CN

1.安装node、npm、yarn
2.参照umi文档，即可完成前端项目搭建

说明：
umi是一套阿里出的企业级前端应用框架，开箱即用，集成了route、dva、antd、antd pro、less、access、request...等插件，相当nice！

写java的，如果想学前端，建议选择react，学习成本稍微比vue高一点点，开始可能不习惯，熟练之后会发现真的香，很符合后端编码习惯。

jsconfig.json 添加包：

"uuid": "^8.2.0",	//生成uuid字符串
"react-dnd": "^11.1.3",	//拖拽组件
"react-dnd-html5-backend": "^11.1.3",	//拖拽组件依赖
"immutability-helper": "^3.1.1",	//对象复制使用
"bpmn-moddle": "^7.0.3"	//解析、操作bpmn xml文件

config.ts 配置loader：

chainWebpack(config) {
    // 设置 alias
    config.module
      .rule('svg')
      .test(/\.svg(\?v=\d+\.\d+\.\d+)?$/)
      .use('svg')
      .loader('@svgr/webpack')
      .options({
        babel: false,
        icon: true,
      });
    //xml-loader使用的是xml2js,还不错
    // config.module
    //   .rule('xml')
    //   .test(/\.xml$/)
    //   .use('xml-loader')
    //   .loader('xml-loader');
    config.module
      .rule('xml')
      .test(/\.xml$/)
      .use('raw-loader')
      .loader('raw-loader');
    //打印配置
    // console.log(config.toString());
  },

主要目录及说明(基于umi + ant-design-pro 5.0.0-beta.0搭建的项目)