React 配置别名 @ （ js/ts 项目中通过 @craco/craco 配置）
// 第一步：安装 craco
$ yarn add @craco/craco
// 或
$ npm install @craco/craco
// 第二步：修改 里的 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"
}
// 第三步：根目录创建 文件，在这里面可以自定义 webpack 相关配置，以及插件相关配置，算是配置文件的扩展暴露文件
module.exports = {
// ...
};
// 第四步： 中配置别名
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
"@": path.resolve(__dirname, "src")
// ....其他的一些配置
}
}
}
// 第五步：在根目录的 或 中追加配置
// baseUrl 设置为 ./ 也就是设置为了基于 的 ./
// paths当中的配置，都是基于baseUrl的
// "api/*": ["src/api/*"]
// 代表遇到 import {} from "api/*" 时，就从 src/api/* 中引入
// 这里的规则可以参考 TS 的文档：/docs/handbook/
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"api/*": ["src/api/*"]
},
// 本地部分语法报错不能识别，可选择忽略报错
"experimentalDecorators": true
}
}
// 第六步：测试
// 在 src/ 文件中的进行调整，测试是否运行正常，有无报错。
import App from './App';
// 改成
import App from '@/App';