React import配置路径别名'@'，简化import Component的方式
前言
在react中，大多数业务逻辑都组件化；极大的减轻了代码的冗余度，如果组件的层次比较深的话，组件的import就比较费劲，在import时使用“../../components/test”的方式，组件的import就会稍显混乱、组件代码不容易维护。为了可高效的、快速的维护组件代码，废弃“../../”的组件引入方式，配置一个组件路径重写的方式引入组件。
配置内容
我在之前就介绍过在react中引入less的配置，同样的为了配置一个路径别名，使用customize-cra来覆写webpack底层配置。配置覆写webpack需要的插件以及第三方库就不在复述，不清楚的可以去参考Ant Design官方的配置说明。(使用的插件库为3.x.x版本，最新版本的插件库进行了更新，有需要配置4.x.x版本插件库可以查阅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")}),);
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;
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>);}}
配置@路径智能提示
现在想来，当时的我一定也在蹒跚地寻找自己的脚步。哪一天，如果我能走的更稳更远了，就去见你。
Path Intellisence (可以在VS插件库中查找并下载该插件)
打开VsCode编辑器设置，在设置中打开setting.json文件。
// 配置@路径智能提示"path-intellisense.mappings": {"@": "${workspaceRoot}/src"}
在项目中package.json所在同级目录下创建jsconfig.json文件。
{"compilerOptions": {"target": "ES6","module": "commonjs","allowSyntheticDefaultImports": true,"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules"]}
分享一种更高效、快捷的import方式，这样的import方式既保证了组件式代码高内聚性、低耦合度的特性，也提高了项目的可维护性，更好的锁定问题所在。