配置 @ 符号表示跟路径并且自动提示

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

前言

当我们在项目中引入文件的时候，如果这个文件藏的比较深，需要一层一层的 ./ 找出去，这样就比较麻烦，开发效率也不高。为了提高开发效率，我们可以配置从根路径 src 去查找。一般我们用 @ 符号代表根路径，这样别人一看就知道是从 src 出发找文件的。 那么 @ 符号应该怎么配置呢？

1、需要下载一个修改 CRA 配置包

npm i -D @craco/craco 
// 或者
yarn add @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、 重启项目，让配置生效

配置完成之后，小伙伴们会发现一个问题：使用 @ 符号没有提示。这可怎么办呢？别慌！下一步就教你们怎么配置 @ 自动提示路径。 1、创建 path.tsconfig.json 配置文件 2、在该配置文件中添加以下配置

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

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

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

好了，完成啦！ 接下来就可以愉快的使用@符号来导入导出文件啦。