Ts+Cra项目文件路径别名不生效问题

最新推荐文章于 2024-07-06 01:01:20 发布

一一.

最新推荐文章于 2024-07-06 01:01:20 发布

阅读量1.1k

点赞数

文章标签： ts react

本文链接：https://blog.csdn.net/Huhuf5/article/details/111560985

版权

在配置Ts+Cra项目时遇到文件路径别名不生效的问题，原因是tsconfig.json中的paths配置在启动时被重写。通过创建ts.paths.json并用extends引入，同时借助react-app-rewired和customize-cra自定义webpack配置，修改package.json，重启项目后，成功解决了别名不生效的故障。

摘要由CSDN通过智能技术生成

在配置完成启动项目时发现，tsconfig.json中的paths配置项被删除。
导致编译时一直找不到文件

经过一番查找，后来得知原因可能是项目启动时tsconfig.json被重写。

避免重写的办法：
新建一个ts.paths.json文件，内容如下：

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

然后再tsconfig.json中使用

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一一.

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

TS中使用引用路径别名报错

将心_的博客

08-03

4213

在TS中引用路径别名提示找不到模块或者相应的声明 1.ts中使用路径别名报错在react中通常路径别名都是在webpack的webpack.config.js文件中配置的，但是在引入了ts之后，webpack中的路径别名引用失效了此时我们需要在跟src文件同级目录的tsconfig.json文件中添加配置：注意要在compilerOptions中添加 "compilerOptions": { "target": "es6" /**指定ECMAScript目标版本**/, "modu

Linux系统下在线安装Jenkins的教程详解

weixin_44505962的博客

12-08

372

一、安装前的清理工作 rpm -qa | grep jdk rpm -qa | grep gcj yum -y remove java-xxx-xxx 二、下载Jenkins（目录根据个人习惯） wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat-stable/jenkins-2.204.3-1.1.noarch.rpm #清华镜像超级快三、安装修改配置文件 1、安装命令 rpm -ivh jenkins-2.204.3-1.1.noarc

参与评论您还未登录，请先登录后发表或查看评论

tsconfig.json中设置“paths“: { “@/*“: [“src/*“] }不生效问题

weixin_70394181的博客

07-06

519

在写项目时配置别名时，在tsconfig.json配置路径提示不生效。配置文件,找到配置项 compilerOptions 添加配置,这是在tsconfig.json的配置，配置并不生效。在vite.config.ts中配置了别名。找到tsconfig.app.json。

tsconfig.json中配了paths为啥不起效呢

最新发布

09-12

在CRA项目中，如果你需要使用路径别名（也称为模块路径映射），通常是为了管理大体积的第三方库，避免直接import时引入的文件路径过长。你可以通过`webpack配置`来设置路径别名。在`config`目录下的`index.js`文件...

[react] react 学习(一) | 创建react+ts+cesium项目配置webpack

啊嘞嘞的博客

11-17

1079

前言看到最近抽空学习学习react框架，作为一名gisr职业发展也不能仅局限webgis，能够结合gis+web前端回报率比单一研究gis带来的收益更高。为什么选择react而不是vue呢(忽略angular..)？并不是vue不够优秀，而是公司需要和大型项目的适应，同样也是大厂的首选项。准备先按官方的资料和github撸一个demo，后面再学学TypeScript + React Hook开发栈。步骤环境说明：操作系统: win10 , nodeJs：15.2.0 , npm：7...

【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile

aoliei的博客

03-17

1913

一、通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形在项目根目录下，运行npm run start，成功启动项目 npm start 二、配置路由 npm i react-router-dom@5.2.0 react-ro..

react+typescript+umi+dva+antd

博哥的二进制世界

06-18

2948

react+umi+dva背景创建一个umi应用umi应用的路由配置路由路由配置工程化约定式路由路由跳转安装插件集@umijs/preset-reactumi+antdumi+dva 背景 React 前端三大框架之一。 Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：”dva 是 react 和 redux 的最佳实践”。 Antd 是阿里的一套开箱即用的中台前端/设计解决方案，UI框架。 Umi 一套可插拔的企业级 react 应用框

react-app-rewired:覆盖 create-react-app webpack 配置而不弹出-开源

07-18

调整 create-react-app webpack 配置而不使用 'eject' 并且不创建 react-scripts 的分支。 create-react-app 的所有好处，没有“无配置”的限制。您可以添加任何需要的插件、加载器。从 Create React App 2.0 开始，这个 repo 目前主要由社区“轻松”维护。使用 next.js 或 Razzle，它们都支持开箱即用的自定义 Webpack。您可以尝试为一组 CRA 2.0 兼容重新布线器或任何旨在支持 2.0 的替代项目和分支尝试自定义 cra。 Rescripts，一个用于扩展 CRA 配置的替代框架（支持 2.0+）。 react-scripts-rewired 用于该项目的一个分支，旨在支持 CRA 2.0。使用 create-react-app 创建您的应用程序，然后重新连接它。没有为弹出脚本重新连接的配置选项。

react typescript + antd 框架代码示例

08-12

react typescript + antd 前端框架, 入门示例demo。写的一个简单的首页页面，展示下component的创建，route创建，页面跳转，carco的主题定制，类似helloworld，使用typescript所写

React+Typescript+antd 搭建项目

m0_51300418的博客

04-29

683

React+Typescript+antd 搭建项目初始化项目开发环境: node: v14.15.0 yarn: 1.22.10 npx: 7.8.0 editor: visual studio code 使用cra进行项目初始化 npx create-react-app my-app --template typescript 如果已经使用cra创建过项目, 执行: npm install --save typescript @types/node @types/react @types/re

react+typescript+antd脚手架搭建

weixin_33701294的博客

03-11

3091

前段时间研究了一下react+typescript开发方式，再加上antd，开发感受还是挺不错的。本篇文章主要讲下在官方推荐的脚手架的基础上搭建脚手架所遇到的问题。一开始使用的是create-react-app-typescript脚手架（此方案已废弃） npx create-react-app my-app --scripts-version=react-scripts-ts cd my-...

React(hook)+Typescript+Antd 实现一个可配置的后台管理系统

u013620259的博客

07-09

4571

1.效果预览地址点击这里 2.应用到的技术栈 React（16.8）+ Typescript（3.5）+Antd（3.2）+redux + sessionStorage + less 3.搭建环境 1.安装官网react脚手架的typescript版本 $ npx create-react-app my-app --typescript $ # 或者 $ yarn create reac...

React And TypeScript（一：基本环境+集成antd）

JUSTIN的博客

01-09

1万+

前言上东家前端pc项目是15年的React+Flux，当然架子肯定是其他大牛搭建的。本司刚刚最近才有新版pc的需求（ps：之前只要个静态pc和mobile页面, 简单搭建webpack@3打包文件），所以需要重新搭建一个pc。想来想去，angularjs太重，没人用它做pc，不合适；vue，算了吧，文档都不知道长什么样子；jquery，用它估计也是想找死。最后技术定位到React+ React...

react+ant design pro + typescript+ spring boot 权限工作流框架

爱技术、爱生活

06-04

839

基于 Ant Design 4.6, Ant Design Pro V5 ,typescript 开发的系统框架，涵盖软件开发的常用功能，比如：权限，工作流、字典、数据库结构、swagger文档、日志等项目开发利器。访问地址：http://47.94.229.181:82/ ...

React + TypeScript + antd 常见开发场景

wbskb的博客

08-20

923

React + TypeScript + antd 的一些常见开发场景，例如: : 时间戳转格式、禁用的表单、删除多选表格、文字内容、筛选对象、自封装表格、模态框、步骤条、搜索框、 Tree 树、封装axios、 CSS滚动样式、 Tree、 Form、简单 Form、表格、 Button、

Ts+Cra项目 文件路径别名不生效问题

Ts+Cra项目文件路径别名不生效问题