React 之 Ant Design 按需引入

使用官方推荐的脚手架

create-react-app myapp

暴露webpack 配置

cd myapp && yarn eject
//按提示输入 y
yarn run v1.16.0
$ react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

修改 ./config/webpack.config.js options

options: {
+	babelrc: true,
-	babelrc: true,
	configFile: false,
	compact: false,
	presets: [
		[require.resolve('babel-preset-react-app/dependencies'),
			{ helpers: true },
		],
		],
		cacheDirectory: true,
		cacheCompression: isEnvProduction,

		// If an error happens in a package, it's possible to be
		// because it was compiled. Thus, we don't want the browser
		// debugger to show the original code. Instead, the code
		// being evaluated would be much more helpful.
		sourceMaps: false,
	},

修改 package.json babel 配置

  "babel": {
    "presets": [
      "react-app"
    ],
   + "plugins": [
   +  [
   +     "import",
   +    {
   +       "libraryName": "antd",
   +      "style": "css"
   +     }
   +  ]
   + ]
  }

安装依赖

//安装依赖
yarn add react-router axio less-loader antd babel-plugin-import
//启动项目 
yarn start

报错与解决办法

出现错误 Cannot find module '@babel/plugin-transform-react-jsx-source'
先删除 node_node_modules 再次安装

rm -rf node_modules
yarn install

附上链接 Cannot find module ‘@babel/plugin-transform-react-jsx-source’ when running React App

按需引入组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd'

function App() {
  return (
    <div className="App">
      <DatePicker />
    </div>
  );
}

export default App;

在组件内使用

在 /src/ 下新建 page 文件夹下新建 home 文件夹新建 Home.js 和 index.css

Home.js

import React from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import './index.css';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default class SiderDemo extends React.Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({ collapsed });
    };

    render() {
        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                    <div className="logo" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        <Menu.Item key="1">
                            <Icon type="pie-chart" />
                            <span>Option 1</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Icon type="desktop" />
                            <span>Option 2</span>
                        </Menu.Item>
                        <SubMenu key="sub1" title={
                                <span>
                                    <Icon type="user" />
                                    <span>User</span>
                                </span>
                            }>
                            <Menu.Item key="3">Tom</Menu.Item>
                            <Menu.Item key="4">Bill</Menu.Item>
                            <Menu.Item key="5">Alex</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" title={
                                <span>
                                    <Icon type="team" />
                                    <span>Team</span>
                                </span>
                            }>
                            <Menu.Item key="6">Team 1</Menu.Item>
                            <Menu.Item key="8">Team 2</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="9">
                            <Icon type="file" />
                            <span>File</span>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }} />
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>User</Breadcrumb.Item>
                            <Breadcrumb.Item>Bill</Breadcrumb.Item>
                        </Breadcrumb>
                        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>Bill is a cat.</div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        );
    }
}

index.css

#components-layout-demo-side .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
}

在 app中 引入组件

import React from 'react';
import Home from './page/home/Home'
import './App.css';

function App() {
  return (
    <div className="App">
      <Home/>
    </div>
  );
}

export default App;

其他问题 Import in body of module; reorder to top import/first

将组件中所有 import 写在最前即可。