前端框架中@路径别名原理和配置
在很多框架中，我们可以直接使用
@来指向项目根目录或者src目录。
看起来非常神奇。
下面我们来探究一下@的原理和配置方法。
背后原理
首先我们要明确的是，js想要引用特定包，必然要遵循js的规则。
js可以使用相对路径或者相对本地和全局node_modules的绝对路径来引用某个包。有且只有这两种方式。
想要让某个别名可以指向某个目录，只有在build前手动将这个别名替换成我们指定的目录。
@之所以可以生效，也就是框架在项目build前自动帮我们将@转译成了项目的特定目录。
大致流程：
function beforeBuild() {
// ...
// 如果配置了@路径别名
for(fileContent in files) {
// 当然，实际上肯定是通过正则表达式来进行替换的，这里简化一下，理解意思就行
fileContent.replace('@', '配置的路径');
}
// ...
}
具体配置
知道了原理，我们也就明白路径别名要在什么地方配置了。
既然是框架提供的一种自动转换工具，自然就要在框架级别的配置文件中去配置。
比如vite中的vite.config.json，webpack中的webpack.config.json
具体怎么配置，我们去参考官方文档就好了。
以vite举例:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
// ... 其他
resolve:{
alias: {
'@': '/src',
},
}
})
这样配置之后，在代码build后，就能正常引用了。
vscode飘红
等一下！！
这样配置后在vscode里面怎么还是会飘红报错？
难道我们配置错了？
但我们build后会发现其实还是正常引用了。
说明配置生效了，build后自动将路径别名给替换了。
那么vscode之所以报错，就是因为代码提示工具没有找到相应的引用。
ts代码提示工具并不走框架，如果我们不单独配置，我们写什么路径，他就去什么路径查找。
那么我们接下来就是要配置提示工具，让提示工具遇到某一类路径，就去配置的路径去查找包
typescript的配置文件在tsconfig.json，查阅官方文档后，我们可以找到这样的配置：
/* tsconfig.json */
{
/*... 其他*/
"compilerOptions"{
"baseUrl": "./",
"paths": {
"@/*" : ["src/*"]
}
}
}
- baseUrl: paths中路径如果是相对路径，就会以baseUrl为当前目录。
- paths:
路径别名模式: 路径数组- 之所以是个数组，是因为可以指定多个路径，一个路径找不到就会去另一个路径去寻找。
配置完成后，重启一下vscode，或者重启一下ts server，vscode中的报错就会消失了。
vscode还在飘红
等一下！
vite的react-ts模板中这样配置后怎么依然还在飘红！！
这是因为tsconfig加入了新的reference配置，可以针对不同的包进行不同的配置。
于是vite中react-ts模板使用了这一新特性。
在项目目录下， 我们可以看到3个tsconfig文件
- tsconfig.json
- tsconfig.app.json
- tsconfig.node.json
tsconfig中配置哪个文件进行处理的字段是include或file，所有符合include里指定的
文件夹或file里面的文件都会使用这个配置文件。
以vite中react-ts模板为例，其相应的值如下:
- tsconfig.json:
"file": [] - tsconfig.app.json:
"include":["src"] - tsconfig.node.json:
"include": ["vite.config.ts"]
我们编写代码一般是在src目录，所以，自然，我们要配置的路径别名应该在tsconfig.app.json中。
加上后，vscode不再飘红！
处理方法总结
- 查阅相关框架配置，找到路径别名的设置项
- 配置tsconfig.json，加入别名的查找路径
- 还报错就检查一下配置的tsconfig中include是否是包含了所有业务代码文件，如果没有，说明可能使用了reference，去有相应include的配置文件中添加上一步的配置。