antd 按需加载

.babelrc

@@ -15,6 +15,19 @@
         "useBuiltIns": "usage"
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/env",
+    "@babel/typescript",
+    "@babel/react"
+  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "es",
+        "style": "css" // `style: true` 会加载 less 文件
+      }
+    ]
   ]
 }

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
+    "antd": "^4.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
@@ -23,6 +24,7 @@
     "autoprefixer": "^9.7.6",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.1.0",
+    "babel-plugin-import": "^1.13.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.5.3",
     "file-loader": "^6.0.0",

src/app.less

@@ -1,15 +1,16 @@
+@import '~antd/dist/antd.css';
 .App {
   height: 300px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: lightcoral;
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
+  // background-color: lightcoral;
   h1 {
     font-size: 16px;
     color: #fff;
   }
   .background {
-    position: absolute;
+    // position: absolute;
     width: 100%;
     left: 0;
     top: -124px;

src/app.tsx

@@ -1,17 +1,70 @@
 import * as React from 'react';
+
+import { Menu, Dropdown, Button, DatePicker } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+
 import './app.less';
 import background from './images/background.jpg';
 // const background = require('./images/background.jpg');
 import { Hello } from './views/Hello';
+function onChange(date: any, dateString: any) {
+  console.log(date instanceof Object, typeof dateString);
+}
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="http://www.alipay.com/">
+        1st menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="http://www.taobao.com/">
+        2nd menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
+        3rd menu item
+      </a>
+    </Menu.Item>
+  </Menu>
+);
 
 function App() {
   // console.log(background);
   console.log(8888888);
   return (
     <div className="App">
+      <div>
+        <Dropdown overlay={menu}>
+          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
+            Hover me <DownOutlined />
+          </a>
+        </Dropdown>
+      </div>
+      <div>
+        <div>
+          <DatePicker onChange={onChange} />
+          <br />
+          <DatePicker onChange={onChange} picker="week" />
+          <br />
+          <DatePicker onChange={onChange} picker="month" />
+          <br />
+          <DatePicker onChange={onChange} picker="quarter" />
+          <br />
+          <DatePicker onChange={onChange} picker="year" />
+        </div>
+      </div>
       <h1>I am changed</h1>
       <div>{background}</div>
       <h2>14</h2>
+      <Button type="primary">Button</Button>
       <img className="background" src={background} alt="" />
       <div>
         <Hello compiler="TypeScript" framework="React" />