React 配置别名 @ （ js/ts 项目中通过 @craco/craco 配置）-Toy模板网

这篇具有很好参考价值的文章主要介绍了React 配置别名 @ （ js/ts 项目中通过 @craco/craco 配置）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、简介

在 Vue 项目当中，可以使用 @ 来表示 src/，但在 React 项目中，默认却没有该功能，因此需要进行手动的配置来实现该功能。

别名主要解决的问题：每个页面都使用路径的方式进行引入，这样很麻烦，效率很低，这个时候可以配置一个别名，来直接使用别名引入。
使用 @craco/craco 的这种方式，可以在不释放 React 隐藏配置（$ npm run eject）的情况下就能解决。
React craco 详细使用与介绍（类似 Vue 外抛的 vue.config.js）文章来源地址https://www.toymoban.com/news/detail-695564.html

二、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';