今天俺打算想像vue中使用别名一样,创建一个create-react-app别名。
这样我们引入文件的时候就可以很方便,俺以前的引入习惯一下子也改不了~
在没有引入别名之前,我们可以需要这样引入一个文件:
引入别名后,上面的代码我们可以修改成这样:
import { request } from "@/api/request";
export const apiGetCaptcha = () =>
request({
url: "captcha/get",
});
引入别名一共分为三步,下面俺将为大家做详细介绍。
安装 react-app-rewired
我们需要先安装 react-app-rewired ,在项目下打开控制台输入以下命令:
npm install -S react-app-rewired
将package.json文件中的脚本替换成如下:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
创建config-overrides.js
将下面的代码粘贴到config-overrides.js文件中,如果你不想使用@别名,可以根据自己的爱好修改。
const path = require('path');
module.exports = function override(config) {
config.resolve = {
...config.resolve,
alias: {
...config.alias,
'@': path.resolve(__dirname, 'src'),
},
};
return config;
};
创建paths.json文件
接下来我们创建一个tsconfig.paths.json文件,以俺文章开始的别名为例,tsconfig.paths.json的内容应该是这样的:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
}
}
}
配置tsconfig.json,在最顶部加上如下代码:
"extends": "./tsconfig.paths.json",
以上就大功完成了~