react 使用 craco库 配置 @ 路径,以及 jsconfig.json或者tsconfig.json 配置智能提示

使用 craco库 来自定义CRA配置

1、概述

Craco(Create React App Configuration Override)是一个用于扩展 Create React App(CRA)配置的工具。通过 Craco,你可以在不弹出 Create React App 的内部配置的情况下,轻松地对 CRA 的配置进行自定义。
craco配置文档:https://github.com/dilanx/craco/blob/main/packages/craco/README.md#configuration

2、安装craco

复制代码
npm i -D @craco/craco

3、在项目 根目录中创建 craco 的配置文件:craco.config.js,并在配置文件中配置路径别名,代码如下:

复制代码
const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定:使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

4、修改 package.json 中的脚本命令

packge.json 文件中将以下代码

复制代码
"scripts": {
    "start": "react-scripts start"
    "build": "react-scripts build"
    "test": "react-scripts test"
    "eject": "react-scripts eject"
}

修改成:

复制代码
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

5、配置vscode识别@路径并给出路径提示

在项目根目录创建 jsconfig.json 或者 tsconfig.json 配置文件,代码如下:

复制代码
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

注意: 如果是 TS 没有先配置 tsconfig.json 直接用@会报如下错:

相关推荐
无名客035 分钟前
npm run dev 启动项目 报Error: listen EACCES: permission denied 0.0.0.0:80 解决方法
前端·javascript·vue.js
零点七九36 分钟前
vue npm install卡住没反应
前端·vue.js·npm
墨菲安全41 分钟前
NPM组件 @0xme5war/apicli 等窃取主机敏感信息
前端·npm·node.js·主机信息窃取·npm恶意包·npm投毒
Komorebi_999942 分钟前
vue create 项目名 和 npm init vue@latest 创建vue项目的不同
前端·vue.js·npm
好好研究4 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
程序视点8 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian8 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0018 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴9 小时前
Smoothstep
前端·webgl
十盒半价9 小时前
React 性能优化秘籍:从渲染顺序到组件粒度
react.js·性能优化·trae