首页 > 其他分享 >React 项目中配置 `@` 符号来代替 `src` 目录

React 项目中配置 `@` 符号来代替 `src` 目录

时间:2022-08-16 18:33:43浏览次数:41  
标签:src resolve const .. js React path 目录

1. 主要是修改两个配置文件:craco.config.js 和 tsconfig.json。

// craco.config.js
const path = require("path");

//定义函数resolve,将你想要自定义的路径和js的根路劲作拼接
const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = {
    webpack: {
        alias: {
          //名称:路径
          "@": resolve("src")
        }
    }
}

// tsconfig.json 用来解决 TS 找不到类型定义的报错(JS 用户请跳过)
{
    "compilerOptions": {
        "paths": {
          "@/*": ["src/*"]
        }
    }
}

2. 主要是为了解决../../这种引入路径,一个是避免文件层级过深,太多../../不雅观且容易出错,一个是如果调整文件目录,涉及到层级变化时,平白增加多余工作量。

标签:src,resolve,const,..,js,React,path,目录
From: https://www.cnblogs.com/shellon/p/16592530.html

相关文章