create-react-app 配置alias别名

今天俺打算想像vue中使用别名一样,创建一个create-react-app别名。

这样我们引入文件的时候就可以很方便,俺以前的引入习惯一下子也改不了~

在没有引入别名之前,我们可以需要这样引入一个文件:

create-react-app 配置alias别名

引入别名后,上面的代码我们可以修改成这样:

import { request } from "@/api/request";

export const apiGetCaptcha = () =>
  request({
    url: "captcha/get",
  });

引入别名一共分为三步,下面俺将为大家做详细介绍。

create-react-app 配置alias别名

安装 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",

以上就大功完成了~

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/5423.html

发表评论

登录后才能评论