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

Posted 2021-04-25 逐鹿戎轩

前言

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

配置内容

我在之前就介绍过在react中引入less的配置，同样的为了配置一个路径别名，使用customize-cra来覆写webpack底层配置。配置覆写webpack需要的插件以及第三方库就不在复述，不清楚的可以去参考Ant Design官方的配置说明。(使用的插件库为3.x.x版本，最新版本的插件库进行了更新，有需要配置4.x.x版本插件库可以查阅Ant Design官网相关配置步骤。)

1

路径别名重写方式一

const { override } = require('customize-cra');const path = require("path"); module.exports = override( config =>{ config.resolve.alias = { "@": path.resolve(__dirname, "src") }; return config; },);

2

路径别名重写方式二

const { override, addWebpackAlias } = require('customize-cra');const path = require("path"); module.exports = override( addWebpackAlias({ ["@"]: path.resolve(__dirname, "src") }),);

实例展示

1

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;

2

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> ); }}

配置@路径智能提示

现在想来，当时的我一定也在蹒跚地寻找自己的脚步。哪一天，如果我能走的更稳更远了，就去见你。

1

VsCode插件

Path Intellisence (可以在VS插件库中查找并下载该插件)

2

VsCode中setting.json配置插件功能

打开VsCode编辑器设置，在设置中打开setting.json文件。

// 配置@路径智能提示 "path-intellisense.mappings": { "@": "${workspaceRoot}/src" }

3

创建jsconfig.json文件

在项目中package.json所在同级目录下创建jsconfig.json文件。

{ "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": [ "node_modules" ]}

总 结

分享一种更高效、快捷的import方式，这样的import方式既保证了组件式代码高内聚性、低耦合度的特性，也提高了项目的可维护性，更好的锁定问题所在。

End