Antd demand loading configuration, alias Alias path, and a conventional configuration

Antd demand loading configuration, alias Alias ​​path, and a conventional configuration

1. Load demand and alias alias

About the need to install plug-ins

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

Copy the code a second step, modify package.json file to:

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

Copy the code amended as follows:

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

Copy the code of the third step
further references official website:
antd official website

Create a config-overrides.js with the directory file, reads:

    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. decorator configuration

• installation

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

• Configuration

AddDecoratorsLegacy introduced in to the config-overrides.js

    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()//使用装饰器
    );

• use

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>
      )}
    }
    
 export default Comment

3.vscode plug

Common plug-ins

• ES7 React/Redux/GraphQL/React-Native snippets

rcc: Ordinary assembly
rfc: pure components
...

• React-Native/React/Redux snippets for es6/es7

imr: the introduction of REACT
CCR: introduction means
...