项目示例： https://github.com/easy-team/egg-react-webpack-boilerplate/tree/antd-theme
按需加载
依赖配置
// ${root}/package.json
{
"devDependencies": {
"babel-plugin-import": "^1.0.0"
}
}代码编写
import { Button } from 'antd';官方文档： https://ant.design/docs/react/getting-started-cn
主题定制
主题定制需要开启 webpack less 编译
依赖配置
// ${root}/package.json
{
"devDependencies": {
"less": "^2.7.2",
"less-loader": "^4.1.0"
}
}构建配置
//${root}/webpack.config.js
const path = require('path');
const resolve = (filepath) => path.resolve(__dirname, filepath);
module.exports = {
loaders: {
babel: {
include: [resolve('app/web'), resolve('node_modules')]
},
less: {
include: [resolve('app/web'), resolve('node_modules')],
options: {
javascriptEnabled: true,
modifyVars: {
'primary-color': 'red',
'link-color': '#1DA57A',
'border-radius-base': '2px'
}
}
}
}
};.babelrc 配置
如果是 SSR 模式，需要按如下 env 配置；前端渲染模式可以不用 env 方式。 BABEL_ENV 使用，请参考 https://easy-team.gitee.io/egg-react/babel
{
"env":{
"node": {
"presets": [
"react",
["env", {
"modules": false,
"targets": {
"node": "current"
}
}]
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread"
]
},
"web": {
"presets": [
"react",
["env", {
"modules": false,
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
],
"plugins": [
"react-hot-loader/babel",
"transform-object-assign",
"syntax-dynamic-import",
"transform-object-rest-spread",
["import", {
"libraryName": "antd",
"libraryDirectory": "lib",
"style": true
}]
]
}
},
"comments": false
}
