一、简介
-
在
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';