refactor: use @umijs/deps (umijs#6148)

* refactor: use @umijs/deps

* chore: update

* fix: dts

* fix: testcase

* fix: some testcase

* fix: testcase and upgrade @umijs/deps to 0.2.8

* fix: some testcase

* fix: some testcases

* fix: some testcase

* chore: fix testcase

* fix: testcase

* fix: some testcase

* fix: test case

* feat: use less, less-loader and babel-loader from @umijs/deps

* feat: use babel related packages from @umijs/deps

* feat: use svgr from @umijs/deps

* chore: test coverage

* fix: testcase

* fix: build failed

* fix: testcase

* fix: dts

* feat: less deps

* fix: build failed

Co-authored-by: 名字 <邮箱>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -20,8 +20,7 @@ assignees: ''
 
 ## Mini Showcase Repository(REQUIRED)
 
-> Please provide a repository using `yarn create @umijs/umi-app` then upload to your GitHub
-> 请提供一个可复现的仓库，使用 `yarn create @umijs/umi-app` 创建，并上传到你的 GitHub 仓库
+> Please provide a repository using `yarn create @umijs/umi-app` then upload to your GitHub 请提供一个可复现的仓库，使用 `yarn create @umijs/umi-app` 创建，并上传到你的 GitHub 仓库
 
 <!-- 为节约大家的时间，无复现步骤的 ISSUE 会被关闭，提供之后再 REOPEN -->
 <!-- https://github.com/YOUR_REPOSITORY_URL -->

docs/plugins/plugin-qiankun.md

@@ -81,7 +81,7 @@ export const qiankun = fetch('/config').then(({ apps }) => ({
   apps,
   // 完整生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
   lifeCycles: {
-    afterMount: props => {
+    afterMount: (props) => {
       console.log(props);
     },
   },
@@ -105,7 +105,7 @@ export const qiankun = fetch('/config').then(({ apps }) => ({
 
 ```js
 export default {
-	routes: [
+  routes: [
     {
       path: '/',
       component: '../layouts/index.js',
@@ -127,7 +127,7 @@ export default {
       ],
     },
   ],
-}
+};
 ```
 
 我们现在想在 `/app1/project` 和 `/app2` 这两个路径时分别加载微应用 app1 和 app2，只需要增加这样一些配置即可：
@@ -179,9 +179,9 @@ export const qiankun = fetch('/config').then(({ apps }) => {
       {
         path: '/app1',
         microApp: 'app1',
-      }    
-    ]
-  }
+      },
+    ],
+  };
 });
 ```
 
@@ -200,8 +200,8 @@ export default {
         },
       ],
     },
-  ]
-}
+  ],
+};
 ```
 
 完成了上面的运行时微应用路由配置后，你的路由结构会合自动并成这样的：
@@ -240,7 +240,7 @@ export default {
 import { MicroApp } from 'umi';
 
 export function MyPage() {
-  
+
   return (
     <div>
       <div>
@@ -259,14 +259,13 @@ export function MyPage() {
 import { MicroApp } from 'umi';
 
 export function MyPage() {
-
   return (
     <div>
       <div>
-         <MicroApp name="app1" autoSetLoading />
+        <MicroApp name="app1" autoSetLoading />
       </div>
     </div>
-  )
+  );
 }
 ```
 
@@ -278,21 +277,20 @@ export function MyPage() {
 import { MicroApp } from 'umi';
 
 export function MyPage() {
-
   return (
     <div>
       <MicroApp
         name="app1"
         autoSetLoading
         // 设置自定义 loading 动画
-        loader={loading => <div>loading: {loading}</div>}
+        loader={(loading) => <div>loading: {loading}</div>}
         // 微应用容器 class
         className="myContainer"
         // wrapper class，仅开启 loading 动画时生效
         wrapperClassName="myWrapper"
       />
     </div>
-  )
+  );
 }
 ```
 
@@ -316,33 +314,30 @@ export function MyPage() {
 import { MicroApp } from 'umi';
 
 export function MyPage() {
-
   return (
     <div>
       <div>
-         <MicroApp 
-           name="app1"
-           // 关闭 loading 动画
-           autoSetLoading={false}
-         />
+        <MicroApp
+          name="app1"
+          // 关闭 loading 动画
+          autoSetLoading={false}
+        />
       </div>
     </div>
-  )
+  );
 }
 ```
 
-
-
 ### 子应用配置
 
 #### 第一步：插件注册（config.js）
 
 ```js
 export default {
   qiankun: {
-    slave: {}
-  }
-}
+    slave: {},
+  },
+};
 ```
 
 #### 第二步：配置运行时生命周期钩子（可选）
@@ -386,52 +381,55 @@ PORT=8081
 
 1. 主应用使用下面任一方式透传数据：
 
-  1. 如果你用的 [MicroApp](#MicroApp) 组件模式消费微应用，那么数据传递的方式就跟普通的 react 组件通信是一样的，直接通过 props 传递即可：
+1. 如果你用的 [MicroApp](#MicroApp) 组件模式消费微应用，那么数据传递的方式就跟普通的 react 组件通信是一样的，直接通过 props 传递即可：
 
-     ```js
-     function MyPage() {
-       const [name, setName] = useState(null);
-       return <MicroApp name={name} onNameChange={newName => setName(newName)} />
-     }
-     ```
-
-  2. 如果你用的 [路由绑定式](#RouteBased) 消费微应用，那么你需要在 `src/app.ts` 里导出一个 `useQiankunStateForSlave` 函数，函数的返回值将作为 props 传递给微应用，如：
-     ```ts
-     // src/app.ts
-     export function useQiankunStateForSlave() {
-       const [masterState, setMasterState] = useState({});
-      
-       return {
-         masterState,
-         setMasterState,
-       }
-     }
-     ```
+   ```js
+   function MyPage() {
+     const [name, setName] = useState(null);
+     return (
+       <MicroApp name={name} onNameChange={(newName) => setName(newName)} />
+     );
+   }
+   ```
+
+1. 如果你用的 [路由绑定式](#RouteBased) 消费微应用，那么你需要在 `src/app.ts` 里导出一个 `useQiankunStateForSlave` 函数，函数的返回值将作为 props 传递给微应用，如：
+
+   ```ts
+   // src/app.ts
+   export function useQiankunStateForSlave() {
+     const [masterState, setMasterState] = useState({});
+
+     return {
+       masterState,
+       setMasterState,
+     };
+   }
+   ```
 
-2. 微应用中会自动生成一个全局 model，可以在任意组件中获取主应用透传的 props 的值。
+1. 微应用中会自动生成一个全局 model，可以在任意组件中获取主应用透传的 props 的值。
 
    ```jsx
    import { useModel } from 'umi';
-   
+
    function MyPage() {
      const masterProps = useModel('@@qiankunStateFromMaster');
-     return <div>{ JSON.strigify(masterProps) }</div>;
+     return <div>{JSON.strigify(masterProps)}</div>;
    }
    ```
 
    或者可以通过高阶组件 connectMaster 来获取主应用透传的 props
 
    ```jsx
    import { connectMaster } from 'umi';
-   
+
    function MyPage(props) {
-     return <div>{ JSON.strigify(props) }</div>;
+     return <div>{JSON.strigify(props)}</div>;
    }
 
    export default connectMaster(MyPage);
    ```
 
-3. 和 `<MicroApp />` 的方式一同使用时，会额外向子应用传递一个 setLoading 的属性，在子应用中合适的时机执行 `masterProps.setLoading(false)`，可以标记微模块的整体 loading 为完成状态。
+1. 和 `<MicroApp />` 的方式一同使用时，会额外向子应用传递一个 setLoading 的属性，在子应用中合适的时机执行 `masterProps.setLoading(false)`，可以标记微模块的整体 loading 为完成状态。
 
 #### 基于 props 传递
 
@@ -441,15 +439,15 @@ PORT=8081
 
    ```js
    // src/app.js
-   
-   export const qiankun = fetch('/config').then(config => {
+
+   export const qiankun = fetch('/config').then((config) => {
      return {
        apps: [
          {
            name: 'app1',
            entry: '//localhost:2222',
            props: {
-             onClick: event => console.log(event),
+             onClick: (event) => console.log(event),
              name: 'xx',
              age: 1,
            },
@@ -489,7 +487,7 @@ export default {
 import { MicroAppWithMemoHistory } from 'umi';
 
 export function MyPage() {
-  
+
   return (
     <div>
       <div>
@@ -501,6 +499,7 @@ export function MyPage() {
 ```
 
 ### API
+
 #### <a name="masterOptions">MasterOptions</a>
 
 | 配置 | 说明 | 类型 | 是否必填 | 默认值 |
@@ -620,21 +619,21 @@ v2.3.0 完全兼容 v2 之前的版本，但我们还是建议您能升级到最
 
 ### 与 @umijs/plugin-qiankun 2.3.0 之前版本的变化
 
-* 主应用注册子应用时不再需要手动配置 base 和 mountElementId。
+- 主应用注册子应用时不再需要手动配置 base 和 mountElementId。
 
   这类方式会导致很多关联问题，最典型的是如果我们需要将子应用挂载到某一个具体的子路由下时，常出现由于挂载点还未初始化或已被销毁导致的问题。
 
   现在只需要在注册完子应用后，在期望的路由下指定需要挂载的子应用的 name 即可。
 
-* 可以直接通过 `<MicroApp />` 组件的方式在任意位置挂载自己的子应用。详见 [API 说明](#MicroApp)
+- 可以直接通过 `<MicroApp />` 组件的方式在任意位置挂载自己的子应用。详见 [API 说明](#MicroApp)
 
-* 不再支持主应用是 browser 路由模式，子应用是 hash 路由的混合模式。如果有场景需要可以通过自己使用 `<MicroApp />`组件加载子应用。
+- 不再支持主应用是 browser 路由模式，子应用是 hash 路由的混合模式。如果有场景需要可以通过自己使用 `<MicroApp />`组件加载子应用。
 
-* 移除了 base、mountElementId、defer 等配置，现在有更好的方式来解决这类问题，参见第一条。
+- 移除了 base、mountElementId、defer 等配置，现在有更好的方式来解决这类问题，参见第一条。
 
-* rename `jsSandbox` -> `sandbox`，来自 qiankun2.0 的升级。
+- rename `jsSandbox` -> `sandbox`，来自 qiankun2.0 的升级。
 
-* **完全兼容 1.x 插件。**
+- **完全兼容 1.x 插件。**
 
 ## Roadmap
 
@@ -645,8 +644,8 @@ v2.3.0 完全兼容 v2 之前的版本，但我们还是建议您能升级到最
   ```tsx
   // HistoryOptions 配置见 https://github.com/ReactTraining/history/blob/master/docs/api-reference.md
   type HistoryProp = { type: 'browser' | 'memory' | 'hash' } & HistoryOptions;
-  
-  <MicroApp history={{ type: 'browser', basename: '/microApp' }} />
+
+  <MicroApp history={{ type: 'browser', basename: '/microApp' }} />;
   ```
 
 - [ ] 运行时统一，针对多层嵌套微应用场景