配置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>
      )}
    }
    
 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:引入组件
…