首页 > 其他分享 >react中使用craco,针对路径转换,修改webpack别名路径配置

react中使用craco,针对路径转换,修改webpack别名路径配置

时间:2024-05-10 11:02:38浏览次数:26  
标签:路径 react start webpack craco build scripts

1.0 首先下载craco依赖包

npm install @craco/craco -D

2.0 在项目根目录下面新建craco.config.js文件,里面内容配置为

const path = require('path')
module.exports = {
    webpack:{
        alias:{
            '@':path.resolve(__dirname,'src')
        }
    }
}            

3.0 在package.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"
  },

4.0 前面三步更改完成后就可以使用@去进行查找文件,比如:
import Login from '../pages/Login' 可以替换为import Login from '@/pages/Login'
但是如果想要'@/’之后有提示信息,需要进行添加另外一个文件
在根目录下面新增 jsconfig.json文件,文件内容如下:

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}

那么以上就是使用craco针对路径转换,修改webpack别名配置的整个过程,可以使用@查找文件,并且对查找的文件进行提示!

标签:路径,react,start,webpack,craco,build,scripts
From: https://www.cnblogs.com/guhonghao/p/18183841

相关文章

  • React — 访问 Redux Store 的正确方法是什么?
    在组件中访问Store的最佳方法是使用connect()函数,该函数创建一个包裹现有组件的新组件。此模式称为高阶组件,通常是在React中扩展组件功能的首选方式。这允许您将状态和Action创建者映射到组件,并在Store更新时自动传递它们。使用connect的<FilterLink>组件:import{......
  • react + antd + js 简单Cron组件,支持国际化
    Cron.jsimportReact,{Fragment,useState,useCallback,useRef,useEffect}from'react';import{Select,TimePicker,Input}from'antd';constOption=Select.Option;constmwidth80={minWidth:80,marginRight:10};constwidt......
  • React文本溢出组件封装以及高亮提示
    React文本溢出组件封装以及高亮提示Abbr组件:使用场景:当我们需要设置支持最大行数时进行省略展示当我们需要设置支持设置超过多少字符进行省略展示当我们需要设置支持关键字高亮展示(有点问题,当关键字被裁剪成...之后,就无法高亮)当我们需要支持忽略大小写高亮当我们需要支持......
  • .gitignore 全局忽略提交特定文件夹,不限路径递归忽略
    创建或修改全局.gitignore文件:在命令行中执行以下命令来创建或修改全局的.gitignore文件gitconfig--globalcore.excludesfile~/.gitignore_global如果文件已存在,则此命令会确保Git使用正确的文件。接下来,编辑这个文件(如果它不存在,这一步骤也会创建它):touch~/.gitig......
  • react 性能优化
    一纯组件1使用shouldComponentUpdate对先前的状态和props数据与下一个props或状态相同,如果两次的结果一直,那么就returnfalse使用纯净组件,pureComponentPureComponents负责shouldComponentUpdate——它对状态和props数据进行浅层比较(shallowcomparison),如果先前......
  • react里面bind与箭头函数
    bind由于在类中,采用的是严格模式,所以事件回调的时候,会丢失this指向,指向undefined,需要使用bind来给函数绑定上当前实例的this指向;箭头函数的this指向上下文,所以永久能拿到当前组件实例,this指向,我们可以完美的使用箭头函数来替代传统事件处理函数的回调箭头函数class......
  • 路径规划-PRM算法(1)
    probabilisticroadmap(PRM)算法是一类用于机器人路径规划的算法,最早在[1]中被提出,属于随机规划器的一种,其数据的主要形式为无向图(另一种RRT基于树)。[^2]将PRM算法分成了两个阶段:learning阶段和query阶段。其中learning阶段主要在configuration空间(机械臂的话是\(C\)......
  • Windows平台git clone文件路径太长报错
    问题描述在Windows下拉取一些比较大的开源项目经常会提示文件路径太长(filenametoolong),然后死活都不成功解决办法1.配置gitgitconfig--systemcore.longpathstrue2.修改文件C:\ProgramFiles\Git\etc\gitconfig(需要以管理员身份打开)[core] autocrlf=true fscache=......
  • Windows程序读取不了中文路径问题
    问题描述今天调试发现win32接口GetFileAttributesW居然不支持中文路径,于是寻找解决方案,找了半天,尝试用boost的fileystem库发现能用,而且boost能跨平台!不支持中文win32接口获取文件属性,当传入参数带有中文字符时,它获取的属性就会异常DWORDGetFileAttributesW([in]LPCWSTRlpFi......
  • Blender动画与云渲染:创造高质量作品的未来路径
    Blender作为开源的3D图形软件,在多个领域广受欢迎。但随着项目复杂度提升,传统渲染方式受限。云渲染技术的兴起突破了这些限制,为创作者提供了更自由、高效的创作环境。 一、Blender动画项目的挑战传统上,Blender动画渲染需要依赖昂贵的硬件设施和大量计算资源,尤其是在处理复杂场......