名詞解釋
-
通常我們?cè)赾onatiner中引入一個(gè)ant-design的component都會(huì)使用import將組件引入，引入方式有以下兩種：
import {DatePicker} from 'antd'import DatePicker from 'antd/lib/date-picker'
-
兩種引入方式的區(qū)別：
- 使用第一種方式會(huì)將antd整個(gè)依賴(lài)模塊全部加載進(jìn)來(lái)
- 使用第二種方式會(huì)將antd中需要的組件加載進(jìn)來(lái)
- 第二種方式效率高但是會(huì)導(dǎo)致如果你的container中引入了許多Component那么就要寫(xiě)很很多行
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' 因此為了中和兩個(gè)方式的優(yōu)缺點(diǎn)antd制定了插件
babel-plugin-import
使用babel-plugin-import插件
- 前提：你的項(xiàng)目必須使用了babel顺又，在項(xiàng)目中包含一個(gè).babelrc的配置文件
- 用法：
- 安裝
npm install babel-plugin-import --save-dev - 在babelrc中配置：
{ "plugins": [["import", { "libraryName": "antd" }]] } //作用 import { Button } from 'antd'; //變成 var _button = require('antd/lib/button'); //還可以同時(shí)引入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'; //相當(dāng)于 var _button = require('antd/lib/button'); require('antd/lib/button/style');
- 安裝
