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

约定不等于承诺〃 2022-01-27 11:43 422阅读 0赞

# 配置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官网][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>
          )}
        }
        
     export default Comment

### 3.vscode插件 ###

#### 常用插件 ####

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

rcc:普通组件  
rfc:纯组件  
…

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

imr:引入react  
ccr:引入组件  
…

[antd]: https://ant.design/docs/react/use-with-create-react-app-cn