react import 配置路径别名'@'，简化import Component的方式

摘要

　　在react中，大多数业务逻辑都组件化；极大的减轻了代码的冗余度，如果组件的层次比较深的话，组件的import就比较费劲，在import时使用“../../components/test”的方式，组件的import就会稍显混乱、组件代码不容易维护。为了可高效的、快速的维护组件代码，废弃“../../”的组件引入方式，配置一个组件路径重写的方式引入组件。

配置内容

　　我在之前就介绍过在react中引入less的配置，同样的为了配置一个路径别名，使用customize-cra来覆写webpack底层配置。(配置覆写webpack需要的插件以及第三方库就不在复述，不清楚的可以去参考Ant Design官方的配置说明)

路径别名重写方式一

const { override } = require('customize-cra');
const path = require("path");

module.exports = override(
     config =>{
         config.resolve.alias = {
             "@": path.resolve(__dirname, "src")
         };
         return config;
     },
);

路径别名重写方式二

const { override, addWebpackAlias } = require('customize-cra');
const path = require("path");

module.exports = override(
    addWebpackAlias({
        ["@"]: path.resolve(__dirname, "src")
    }),
);

Example-实例展示

App.js父组件代码

import React, { useState } from 'react'
import style from './App.module.less'
import { Home } from '@/pages/home'; //@方式引入Home组件

class App extends React.Component {
    render() {
        return (
            <div className={style.box}>
                <Home name='杰瑞与汤姆'/>
            </div>
        );
    }
}

export default App;

Home.js子组件代码

import React, { Component } from 'react';
import { Button } from 'antd';

export class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                <Button type='danger'>{this.props.name}</Button>
            </div>
        );
    }
}

测试结果