配置antd按需加载，alias路径别名，以及常规配置-蒲公英云

配置antd按需加载，alias路径别名，以及常规配置

1. 按需加载和alias别名

安装一下需要的插件

npm i antd react-app-rewired customize-cra babel-plugin-import less less-loader -S

复制代码第二步，修改package.json文件,将:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
}

复制代码修改为：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

复制代码第三步
更多参考官网：
antd官网

在跟目录创建一个config-overrides.js的文件，内容为:

const {  override, fixBabelImports, addLessLoader, addWebpackAlias } = require('customize-cra');
    const path = require('path');
    function resolve(dir) { 
        return path.join(__dirname, '.', dir)
    }
    module.exports = override(
        // antd按需加载，不需要每个页面都引入"antd/dist/antd.css"了
        fixBabelImports('import', { 
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: true  //这里一定要写true，css和less都不行
        }),
        // 配置路径别名
        addWebpackAlias({ 
          @: resolve("src")
        })
  )

2.装饰器配置

安装

npm install @babel/plugin-proposal-decorators --save

配置

在config-overrides.js中引入addDecoratorsLegacy即可

const {  override, fixBabelImports,  addWebpackAlias ,addDecoratorsLegacy} = require('customize-cra');
    const path = require("path")
    module.exports = override(
      fixBabelImports('import', { 
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
      }),
      addWebpackAlias({ 
        '@': path.join(__dirname, "src")
      }),
      addDecoratorsLegacy()//使用装饰器
    );

使用

import React, { Component } from ‘react’

const withName = (Com) => { 
  class Hoc extends Component { 
    constructor(props) { 
      super(props);
    }
    render() { 
      return (
        <Com { ...this.props} name="hansu"></Com>
      )
    }
  }
  return Hoc
}
@withName
class Comment extends Component{ 
  render(){ 
  return (
    <div>
      { this.props.name}
    </div>
  )}
}