不会就学！在react和TypeScript中配置@代替 src 目录的绝对路径

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

现在项目中，都是通过配置@路径别名简化路径处理，所以我们需要掌握这个配置，在react和TypeScript中配置基本都是一样的，有个很小的差别，我会标注出来

1、安装修改 CRA 配置的包：

npm i -D @craco/craco

2、在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名

const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
  // 约定：使用 @ 表示 src 文件所在路径
  '@': path.resolve(__dirname, 'src'),
  // 约定：使用 @scss 表示 样式 文件所在路径
  '@scss': path.resolve(__dirname, 'src', 'assets', 'styles')
},
},
}

3、修改 package.json 中的脚本命令

// 将 start/build/test 三个命令修改为 craco 方式
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}

4、在代码中，就可以通过 @ 来表示 src 目录的绝对路径

5、重启项目，让配置生效

重启项目之后@就可以用来表示 src 目录的绝对路径，但是我们希望vscode给出目录提示，所以我们还需要配置两步，这时候react和在TypeScript中就有一些区别

在react中

在项目根目录创建 jsconfig.json 配置文件，jsconfig.json 中：

{
"compilerOptions": {
"baseUrl": "./",
"paths": {
  "@/*": ["src/*"]
}
}
}

vscode 会自动读取 jsconfig.json 中的配置，让 vscode 知道 @/ 就是 src/ 目录

在react加TypeScript中

1、创建 path.tsconfig.json 配置文件

在path.tsconfig.json 中的代码配置：

{
"compilerOptions": {
"baseUrl": "./",
"paths": {
  "@/*": ["src/*"]
}
}
}

2、在 tsconfig.json 中导入该配置文件，让配置生效

{
// 导入配置文件
"extends": "./path.tsconfig.json",
}

配置完这一步，vscode也会有目录提示了