我选择使用react官方推荐的构建工具,create-react-app+webpack来快速搭建项目,蚂蚁金服的AntDesign这个ui框架能满80%的平时需求,强力主推。
下面我就是讲webpack下的按需加载(浏览器引入就略过了)的配置方法。分为两种babel-plugin-import(推荐)和手动引入
我的版本信息
"webpack": "3.8.1",
"react": "^16.3.2",
下载包
npm install antd -S
yarn add antd
按需加载
babel-plugin-import(推荐)
下载包
npm install babel-plugin-import -D
webpack 配置
在webpack.config.dev.js中添加下面的代码
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
"plugins": [
["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css"}] // `style: true` 会加载 less 文件
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
然后只需从antd引入模块即可,无需单独引入样式,等同于下面手动引入的方式
//babel-plugin-import会帮助你加载JS和CSS
import {DatePicker} from 'antd'
手动引入
import DataPicker from 'antd/lib/date-pcker';//加载JS
import 'antd/lib/date-picker/style/css';//加载CSS
//import 'antd/lib/data-picker/style';//加载less