Ant Design 3.0 使用案例
技术:react16 + antd3 + webpack3

概述

React升级到16版本之后,antd也紧跟着发布了3.0新版本。 AntDesign作为一套UI设计组件,不仅可以缩短前端工程师的开发时间,而且可以让我们在没有UI支持的情况下制作出漂亮的前端页面。 随着Antd已经被越来越多的公司所使用,每一个React工程师学习Antd的使用方法就要提上日程。

详细

本文适合对象

  1. 有过React使用经验。
  2. 有过webpack使用经验。
  3. 了解node。

DEMO使用方式

  1. npm install
  2. npm run start
  3. npm run startfe
  4. 登录localhost:8088查看效果

注:demo中node使用pm2进行管理和启动,如果需要查看终端输出,可以使用pm2 log命令查看。

本demo是在macOS环境下开发运行的,若是windows环境运行有问题,可以在评论留言。

关于AntDesign

虽然Antd是一门非常棒的UI设计语言,但是在我个人看来,Antd比较适合用作后台系统开发,并不是非常适合用在前端页面开发。

后台页面不需要给用户看,因此以样式和开发效率以及功能为主。

现在的网站十分看重用户体验,前端项目的体积需要尽可能的小,然而Antd组件由于拥有充足的功能和接口,就导致组件的体积必然不小。

作为通用组件库,Antd组件拥有在大部分情况下都可以用得到的接口,但是在我们具体的业务中,可能只需要其中的一两个功能,但是却不得不引入整个组件,本来5kb就可以完成我们所需功能的代码,现在却变成了50kb甚至100kb的代码量,这在前端项目中是十分致命的问题。

在index.js文件中,我只引入了Menu和Icon两个组件,文件大小就已经飙升到了450kb。

import { Menu, Icon } from 'antd';

即使使用了Uglifyjs插件对js文件进行压缩,最后还是有200kb左右的大小。

可能如果要我们自己的业务中实现这个Menu组件,只需要几kb就可以了。

但是这并不能否认Antd本身的优秀,即使是前端工程师,也可以从Antd组件中学习到很多东西,甚至我们平时开发组件的时候,都是按照antd的标准和接口设计去进行开发的。

这里是知乎上对Antd设计语言的评价:链接

这里是antd发行3.0版本的版本那说明:链接

Ant Design 3.0 按需加载

快速引入使用

我们通过npm安装好了antd之后,不可能直接将antd全部组件都引入进来,那样会导致包的提及非常大,所以必须使用按需加载,用到什么组件就引入什么组件。

npm install --save antd

若npm速度太慢,可以安装淘宝的国内镜像cnpm。

npm install -g cnpm

然后用cnpm安装就会快很多。

cnpm install --save antd

安装完成之后,我们只需要在react组件中引入组件即可。

  1. import Button from 'antd/lib/button';
  2. import 'antd/lib/button/style';
  3. // 注意,这里antd实用的是less样式,如果webpack没有配置对less的解析的话,这样引入会报错。
  4. // 可以直接使用引入css的方式
  5. // import 'antd/lib/button/style/css';

这样引入之后,我们就可以在下面直接使用Button组件了。

<Button>This is a Button</Button>

但是这种引入方式十分繁琐,不仅路径名太长,而且我们每引入一个组件,还需要专门到相应的style文件里面引入样式文件。

就没有一种方法可以直接引入组件就可以了吗?

答案当然是有的。

配合babel自动加载

如果你使用过webpack和es6语法,那么你一定知道什么是babel,如果你对babel不了解,那么可以先到babel中文网了解一下。

我们如果在项目中使用了babel,就可以配合babel-plugin-import插件自动按需加载。

npm install --save babel-plugin-import

安装好插件之后,我们在根目录下创建一个.babelrc文件(注意直接以.开头),用来对全局babel进行配置。

  1. {
  2. "plugins": [
  3. ["import"]
  4. ]
  5. }

这样我们就可以自动引入babel-plugins-import插件了。

使用了这个插件之后,我就可以变成这种写法了:

import { Button } from 'antd';

babel-plugin-import 可以帮我们把这种写法自动编译成如下这种写法:

import Button from 'antd/lib/button';

现在路径名过长的问题解决了。

关于引入样式的问题,我们可以还是通过babel-plugin-import插件的style属性来做到组件样式自动加载。

  1. {
  2. "plugins": [
  3. ["import", {"libraryName": "antd", "style": true}]
  4. ]
  5. }

这样,在组件中,我们就可以直接用import { Button } from 'antd';这种写法自动引入组件和组件相对应的样式文件了。

不过这里要注意的是,import插件的style属性,不仅会引入组件样式,还会引入一些必要的全局样式,大家使用的时候要注意,官方建议如果没有必要的话,可以不使用该属性。

组件代码截图:

前端组件展示截图:

自此,在项目中引入antd的工作就完成了。

本文只是讲述了如何在项目中引入antd,因为没有业务场景,所以并没有写具体的前端页面,大家看demo的时候尽量看代码配置即可。

demo是在上一篇的demo:react-cli的基础上进行改造的,可能有很多没必要的插件和配置文件,大家忽略即可。

本文依然发表在Demo大师上,同学们可以去那边帮我点击一下,那边有我的具体demo源码可以下载。

共有 2 条评论

Top