react 中引入 ant-design

  ant-design 的引入有两种方式:

    方式一: import DatePicker from 'antd/es/date-picker' // 加载js

         import 'ant/es/date-picker/style/css' // 加载 css

    方式二: import { DatePicker } from 'antd'

  通过方式二引入 ant-design 的组件,样式可以通过方式一的方式引入,也可以通过配置 loader 或者 .babelrc 文件来处理,这样两种方式的效果其实是一样的;

  loader 中

                     {
                                test: /\.js|.jsx$/,
                                exclude: /node_modules/,
                                use: {
                                        loader: 'babel-loader',
                                        options: {
                                                presets: ['@babel/preset-env']
                                        }
                                }
                        }, 

  .babelrc 中如下配置。其中 presets 是对 es6 的解析配置

{
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "browsers": [
                "> 1%",
                "last 5 versions",
                "ie >= 8"
              ]
            }
          }
        ],
        "@babel/preset-react"
      ],
          {
                  "plugins": [
                        ["import", {
                          "libraryName": "antd",
                          "libraryDirectory": "es",
                          "style": "css" // `style: true` 会加载 less 文件
                        }]
                  ]
                }
    }