feat: use @umijs/plugin-antd-mobile

Author: xiaohuoni

.eslintrc

@@ -1,4 +1,8 @@
 // umijs@3 规则，包名以@umijs/plugin、@umijs/preset 或者 umi-plugin、umi-preset 开头的，将会被直接使用。
-// 所以这个项目使用了 preset: umi-preset-mobile5
+// 所以这个项目使用了 plugins: @umijs/plugin-antd-mobile @umijs/plugin-esbuild @alitajs/hd
+// 下方配置仅需要显式使用 alita 插件
 export default {
+  plugins: ['@alitajs/hd'],
+  hd: {},
+  esbuild: {},
 };

config/config.ts

@@ -4,11 +4,14 @@
     "start": "umi dev",
     "build": "umi build",
     "test": "umi test",
-    "lint": "eslint {src,mock,tests}/**/*.{ts,tsx} --fix",
-    "precommit": "lint-staged"
+    "prettier": "prettier -c --write \"**/*\""
   },
   "dependencies": {
-    "umi-preset-mobile5": "^2.8.24",
+    "@alitajs/hd": "^2.8.30",
+    "@umijs/plugin-antd-mobile": "^1.1.0",
+    "@umijs/plugin-esbuild": "^1.4.1",
+    "antd-mobile": "^5.0.0-rc.7",
+    "prettier": "^2.5.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
@@ -18,25 +21,7 @@
     "@types/react-dom": "^16.0.11",
     "@types/react-test-renderer": "^16.0.3",
     "babel-eslint": "^9.0.0",
-    "eslint": "^5.4.0",
-    "eslint-config-umi": "^1.4.0",
-    "eslint-plugin-flowtype": "^2.50.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.2.2",
     "react-test-renderer": "^16.7.0",
     "umi": "^3.5.18"
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "eslint --fix",
-      "git add"
-    ],
-    "*.{js,jsx}": [
-      "eslint --fix",
-      "git add"
-    ]
   }
 }

package.json

@@ -1,4 +1,6 @@
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }
 

src/global.css

@@ -1,4 +1,3 @@
-
 .normal {
   font-family: Georgia, sans-serif;
   text-align: center;

src/layouts/index.css

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './index.css';
 
-const BasicLayout: React.FC = props => {
+const BasicLayout: React.FC = (props) => {
   return (
     <div className={styles.normal}>
       <h1 className={styles.title}>Yay! Welcome to umi!</h1>

src/layouts/index.tsx

@@ -3,14 +3,12 @@ import Index from '..';
 import React from 'react';
 import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
 
-
 describe('Page: index', () => {
   it('Render correctly', () => {
     const wrapper: ReactTestRenderer = renderer.create(<Index />);
     expect(wrapper.root.children.length).toBe(1);
     const outerLayer = wrapper.root.children[0] as ReactTestInstance;
     expect(outerLayer.type).toBe('div');
     expect(outerLayer.children.length).toBe(2);
-    
   });
 });

src/pages/index/__tests__/index.test.tsx

@@ -3,11 +3,13 @@ import { Button } from 'antd-mobile';
 import { history } from 'umi';
 import styles from './index.css';
 
-export default function ({ }) {
+export default function ({}) {
   return (
     <div className={styles.normal}>
       <div className={styles.welcome} />
-      <p className={styles.description}>To get started, edit <code>src/pages/index.js</code> and save to reload.</p>
+      <p className={styles.description}>
+        To get started, edit <code>src/pages/index.js</code> and save to reload.
+      </p>
       <Button size="large" color="primary" fill="solid" block onClick={() => history.push('/list')}>
         Go to List
       </Button>

src/pages/index/index.tsx

@@ -10,44 +10,28 @@ async function mockRequest() {
     return [];
   }
   count++;
-  return [
-    'A',
-    'B',
-    'C',
-    'D',
-    'E',
-    'F',
-    'G',
-    'H',
-    'I',
-    'J',
-    'K',
-    'L',
-    'M',
-    'N',
-    'O',
-    'P',
-    'Q',
-  ];
+  return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q'];
 }
 
 export default () => {
   const [data, setData] = useState<string[]>([]);
   const [hasMore, setHasMore] = useState(true);
   async function loadMore() {
     const append = await mockRequest();
-    setData(val => [...val, ...append]);
+    setData((val) => [...val, ...append]);
     setHasMore(append.length > 0);
   }
 
   return (
     <>
       <List>
         {data.map((item, index) => (
-          <List.Item key={index} onClick={() => history.goBack()}>{item}</List.Item>
+          <List.Item key={index} onClick={() => history.goBack()}>
+            {item}
+          </List.Item>
         ))}
       </List>
       <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
     </>
-  )
-}
+  );
+};

src/pages/list/index.tsx

@@ -12,7 +12,7 @@
     "strict": true,
     "paths": {
       "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"],
+      "@@/*": ["src/.umi/*"]
     },
     "allowSyntheticDefaultImports": true
   },