前端开发小技巧 - 【React】- 配置@别名路径 以及 路径联想

前言

• 什么是@别名路径？
  • 通过@替代src路径，方便开发过程中的路径查找访问；
  • 
• 什么是路径联想？
  • 就是当我们输入 / 的时候，会有相应的文件目录提示；
  • 
• 在 React 中，我们不能直接使用 @ 去表示 src 文件夹，需要额外的配置；
• 下面就来一起看看怎样配置吧；

• 针对 路径转换 ，修改 webpack 别名路径配置 craco（三方包）；
• 针对 路径联想 ，修改 VSCode 配置 jsconfig.json；

一、配置别名路径

1.1 安装 craco 工具包

• 这个工具包是专门在 cra 环境下扩展 webpack 的一个工具包；
• yarn add @craco/craco -D；

1.2 增加 craco.config.js 配置文件

• 在 项目 根目录 下新增；

// 从 node 中导入 内置的 path 模块
const path = require('path');

module.exports = {
  // webpack配置
  webpack: {
    // 配置别名
    alias: {
      // 约定使用 @ 表示 src 文件所在目录
      '@': path.resolve(__dirname, 'src')
    }
  }
};

1.3 修改 script 命令

• 目标文件：
  • package.json
• 
• ❗ 修改完之后 记得 重启项目；

二、VSCode提示配置

• 在项目 根目录 下新增 jsconfig.json；
• 该文件是针对 VSCode 编译器配置的，当打开编译器的时候，编译器会自动读取该文件里面的配置项；

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