React项目@别名配置(利用craco解决)(npx create-react-app my-app --template typescript创建的项目)

React别名配置(本人通过npx create-react-app my-app --template typescript创建的项目中应用有效)

步骤1: package.json同级目录(根目录)下创建名为tsconfig.path.json的文件(文件名字可自行更改与步骤2中的配置名称相同即可)并写下如下内容:

{
    "compilerOptions": {
            "baseUrl": ".",
            "paths": { // 具体可根据您的需求来定义您想要的别名
                "@/*": ["src/*"],
                "@pages/*": ["src/pages/*"],
                "@components/*": ["src/components/*"],
                "@plugins/*": ["src/plugins/*"],
                "@router/*": ["src/router/*"]
            }
    }
}

步骤2：在tsconfig.path.json同级目录下的tsconfig.json 中添加如下内容:

{
    "extends": "./tsconfig.path.json", //额外添加此段 不需改变之前存在的配置
}

步骤3：安装 @craco/craco和craco-alias 依赖项，具体操作为：

yarn add @craco/craco craco-alias 
或者
npm install @craco/craco craco-alias

步骤4：在安装完依赖后，在根目录(package.json同级目录)下创建craco.config.js文件，并添加如下内容:

const CracoAlias = require("craco-alias");
module.exports = {
    plugins:[
        {
            plugin: CracoAlias,
            options: {
                    source: "tsconfig",
                    baseUrl: ".",
                    tsConfigPath: "./tsconfig.path.json",
            }
	}
    ]
}

步骤5：最后进入package.json文件中，将其中内容改为如下样子:

"scripts": {
    // 此处均将react-scripts改为craco即可
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
},

步骤六 yarn start 或 npm run start 重启项目(若编辑器不报错 但是启动报错 可尝试重启编辑器)

end

备注：本人借鉴了一些相关的技术文档最终实现配置成功。使用的编辑器为VSCODE，配置好后可能需要重启编辑器(我本人是重启编辑器后才弄好的)。当时的情景为：通过CTRL+鼠标左键可以进入指定的路径，但start项目时候会报错，故若出现此类问题可尝试重启编辑器。