一、简介
- 在 Vue 项目当中，可以使用 @ 来表示 src/，但在 React 项目中，默认却没有该功能，因此需要进行手动的配置来实现该功能。
别名主要解决的问题：每个页面都使用路径的方式进行引入，这样很麻烦，效率很低，这个时候可以配置一个别名，来直接使用别名引入。
- 使用 @craco/craco 的这种方式，可以在不释放 React 隐藏配置（$ npm run eject）的情况下就能解决。
二、js/ts + react 项目
// 第一步：安装 craco $ yarn add @craco/craco // 或 $ npm install @craco/craco // 第二步：修改 package.json 里的 scripts 属性。 "scripts": { - // "start": "react-scripts start", - // "build": "react-scripts build", - // "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", "eject": "react-scripts eject" } // 第三步：根目录创建 craco.config.js 文件，在这里面可以自定义 webpack 相关配置，以及插件相关配置，算是配置文件的扩展暴露文件 module.exports = { // ... }; // 第四步：craco.config.js 中配置别名 const path = require('path') module.exports = { // webpack 配置 webpack: { // 配置别名 alias: { // 约定：使用 @ 表示 src 文件所在路径 "@": path.resolve(__dirname, "src") // ....其他的一些配置 } } } // 第五步：在根目录的 jsconfig.json 或 tsconfig.json 中追加配置 // baseUrl 设置为 ./ 也就是设置为了基于 tsconfig.json 的 ./ // paths当中的配置，都是基于baseUrl的 // "api/*": ["src/api/*"] // 代表遇到 import {} from "api/*" 时，就从 src/api/* 中引入 // 这里的规则可以参考 TS 的文档：https://www.tslang.cn/docs/handbook/module-resolution.html { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"], "api/*": ["src/api/*"] }, // 本地部分语法报错不能识别，可选择忽略报错 "experimentalDecorators": true } } // 第六步：测试 // 在 src/index.tsx 文件中的进行调整，测试是否运行正常，有无报错。 import App from './App'; // 改成 import App from '@/App';
