项目示例: 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 使用,请参考 /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
}

官方文档:https://ant.design/docs/react/customize-theme-cn


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
Vue 工程方案 Vue 工程方案
安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置,以下仅仅是举例. 详细配置见:...
2020-05-31 sky
Next 
Weex 工程方案 Weex 工程方案
easywebpack-weex 基于 easywebpack 的 Weex Native 和 Weex Web 打包构建解决方案.安装$ npm i easywebpack-weex --save-dev使用const weex = require('easywebpack-weex'); ...
2020-05-31 sky