名词解释
-
通常我们在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');
- 安装
