【React】alias--@ 路径简写别名

针对React脚手架的一些说明 点此查看React脚手架

随着react app的复杂化,组件间的相互依赖引用也越来越复杂

于是出现了
import xxx from ‘../../components/xxx’

import xxx from ‘../../../components/xxx’
等复杂的相对地址

这种间接地址太过复杂,对路径的关系不够清晰明了,反而增加对路径关系的依赖负担

于是我们需要引入 webpack.resolve.alias 功能,来简化这种路径相对关系

1
2
3
4
5
6
7
8
9
10
11
12
├── package.json
├── ...
├── config
│ ├── ...
│ ├── webpack.config.js
│ └── ...
├── README.md
├── src
│ ├── components
│ ├── pages
│ ├── ...
│ ├── ...

如上是react的工程结构,找到webpack配置,并且修改alias配置即可

1
2
3
4
5
6
7
8
9
10
// ...
resolve: {
...
alias: {
'@components': path.resolve(__dirname, '../src/components'),
...
}
...
},
// ...

通过上述配置后,对components的依赖关系可以从

1
import Detail from '../../components/detail'

修改为:

1
import Details from '@components/detail'

完美处理组件相对地址的别名

坚持原创技术分享,谢谢鼓励我继续创作!