名詞解釋

• 通常我們在conatiner中引入一個ant-design的component都會使用import將組件引入，引入方式有以下兩種：

  • import {DatePicker} from 'antd'
  • import DatePicker from 'antd/lib/date-picker'

• 兩種引入方式的區別：

  • 使用第一種方式會將antd整個依賴模塊全部加載進來
  • 使用第二種方式會將antd中需要的組件加載進來
  • 第二種方式效率高但是會導致如果你的container中引入了許多Component那么就要寫很很多行

    import Form from 'antd/lib/form'
    import Select from 'antd/lib/select'
    import Input from 'antd/lib/input'
    import Checkbox from 'antd/lib/checkbox'
    import Radio from 'antd/lib/radio'
    import DatePicker from 'antd/lib/date-picker'
    
    //第一種
    import {Form, Select, Checkbox, Radio, DatePiceker} from 'antd/lib/form'
  
  

• 因此為了中和兩個方式的優缺點antd制定了插件babel-plugin-import

使用babel-plugin-import插件

• 前提：你的項目必須使用了babel，在項目中包含一個.babelrc的配置文件
• 用法：
  • 安裝npm install babel-plugin-import --save-dev
  • 在babelrc中配置：

    {
      "plugins": [["import", { "libraryName": "antd" }]]
    }
    //作用
    import { Button } from 'antd';
    //變成
    var _button = require('antd/lib/button');
    
    
    
    
    //還可以同時引入ant-design less樣式
    {
      "plugins": [["import", { "libraryName": "antd",style: true }]]
    }
    //使用之前
    import Button from 'antd/lib/button';
    import 'antd/lib/date-picker/style/css';
    //使用之后
    import {Button} from 'antd';
    //相當于
    var _button = require('antd/lib/button');
    require('antd/lib/button/style');