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

 

配置@路径智能提示

　　在测试过程当中，虽然应用了@引入组件的方式，可是在引用过程当中没有智能提示组件路径，为了解决智能提示问题，安装Path Intellisence插件来配置提示。

一、vsCode插件：

　　Path Intellisence（在插件库中查找并下载插件）

二、vsCode中setting.json配置插件功能：（打开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方式既保证了组件式代码高内聚性、低耦合度的特性，也提升了项目的可维护性，更好的锁定问题所在。

更多关于customize-cra库API的使用能够访问github的文档说明，customize-cra库地址：https://github.com/arackaf/customize-cra/blob/master/api.md