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项目时候会报错，故若出现此类问题可尝试重启编辑器。
作者：七里的猫
链接：https://juejin.cn/post/7021535278426751007