前端框架中@路径别名原理和配置

在很多框架中，我们可以直接使用@来指向项目根目录或者src目录。

看起来非常神奇。

下面我们来探究一下@的原理和配置方法。

背后原理

首先我们要明确的是，js想要引用特定包，必然要遵循js的规则。

js可以使用相对路径或者相对本地和全局node_modules的绝对路径来引用某个包。有且只有这两种方式。

想要让某个别名可以指向某个目录，只有在build前手动将这个别名替换成我们指定的目录。

@之所以可以生效，也就是框架在项目build前自动帮我们将@转译成了项目的特定目录。

大致流程：

js 复制代码

function beforeBuild() {
	// ...
	// 如果配置了@路径别名
	for(fileContent in files) {
		// 当然，实际上肯定是通过正则表达式来进行替换的，这里简化一下，理解意思就行
		fileContent.replace('@', '配置的路径'); 
	}
	// ...
}

具体配置

知道了原理，我们也就明白路径别名要在什么地方配置了。

既然是框架提供的一种自动转换工具，自然就要在框架级别的配置文件中去配置。

比如vite中的vite.config.json，webpack中的webpack.config.json

具体怎么配置，我们去参考官方文档就好了。

以vite举例:

ts 复制代码

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，查阅官方文档后，我们可以找到这样的配置：

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的配置文件中添加上一步的配置。