现象：在前端开发中，发现项目中很多路径引入都是相对路径，出现很多类似
import api from "../../../api/test"
import * as api from "../../../api"
这样会导致文件引用的时候，需要计算层级，拖慢开发速度，解决方法如下：
对于经常使用的目录，可以采用别名的方式解决
不管路径如何，只要在该目录下就从该目录读起，优化效果
一、对于typescrip项目
1、示例项目
一个简单的ts项目，目录结构为
├── package.json
├── prettier.config.js
├── public
├── README.md
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── assets
│ │ └── css
│ │ └── public.css
│ ├── components
│ │ └── UTable
│ │ └── index.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── layout
│ │ ├── content.tsx
│ │ └── index.tsx
│ ├── logo.svg
│ ├── page
│ │ ├── Demo1
│ │ │ └── index.tsx
│ │ ├── Demo2
│ │ │ └── index.tsx
│ │ ├── SignIn
│ │ │ └── index.tsx
│ │ └── SignUp
│ │ └── index.tsx
├── tsconfig.json
└── yarn.lock
2、配置
tsconfig.json文件中baseUrl 可以设置为. ./ src任意一个
"compilerOptions": {
baseUrl: "."
}
., ./ 意义相同，表示引用tsconfig.json路径开始
3、使用
此时在app.tsx中引用Demo1文件如下
import Demo1 from "src/page/Demo1"
src 表示引用从 src目录开始
此时在app.tsx中引用Demo1文件如下
import Demo1 from "page/Demo1"
4、注意
1、当然，对于相对路径依然适用
2、在compilerOptions中，我尝试使用了paths参数，
"compilerOptions": {
baseUrl: ".",
paths: {
"@": ["./src"]
}
}
但是可能由于版本问题，console报错
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
二、对于javascript项目
通过webpack配置设置别名, webpack关于alias配置
1、示例项目
该项目为一个react的js项目，我们通过customize-cra 来覆盖项目隐藏的webpack配置，项目结构为
├── config-overrides.js
├── package.json
├── public
├── README.md
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── components
│ │ └── Demo1
│ │ └── index.js
│ │ └── Demo2
│ │ └── index.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── page
│ ├── reportWebVitals.js
│ └── setupTests.js
└── yarn.lock
2、配置
其中config-overrides.js为覆盖原有webpack的文件
cat config-overrides.js
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const path = require('path');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
addWebpackAlias({
'@': path.resolve('./src/components'),
'src': path.resolve('./src')
})
);
3、使用
cat app.js
import Demo1 from 'components/Demo1'
import Demo2 from 'src/components/Demo2'
import './App.css';
function App() {
return (
<div className="App">
<Demo1 />
<Demo2 />
</div>
);
}
export default App;
直接在项目中，从components目录或src目录引用即可
4、特别说明
1、别名冲突
我们知道在引入css文件的时候，我们通常会这样
@import "app/index.css"
如果我们别名使用了@ 等特殊字符，那么低版本的cssloader可能会解析失败，此时需要在cssloader中配置别名，或者使用 ~ 引入
@import "~app/index.css"
2、版本问题
各个项目使用的js node 插件版本不同，会导致配置别名的方法不同，但殊途同归，找到封装的方法进行配置即可。
