摘要
在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插件来配置提示。
1、vsCode插件：
Path Intellisence（在插件库中查找并下载插件）
2、vsCode中setting.json配置插件功能：（打开vscode编辑器设置，在设置中打开setting.json文件）
// 配置@路径智能提示
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
3、在项目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
