react+TS配置@开头路径提示和别名指南
更新时间：2026年06月30日 16:21:21 作者：开发攻城狮
这段文章介绍了如何在项目中配置路径别名和提示,通过创建craco.config.js和修改package.json及path.tsconfig.js文件,简化文件引入路径,提升项目开发效率
我们在写项目的时候，引入文件有路径别名和提示会非常的爽，如下图，那就需要给项目配置路径别名和提示了。
第一步
yarn add @craco/craco -D
第二步
在项目根目录下，创建两个文件
craco.config.js path.tsconfig.json
第三步
打开刚创建的 craco.config.js
//对webpack配置别名
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src'),
},
},
}
第四步
修改 package.json
第五步
打开path.tsconfig.js 加入一下代码
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
],
"@assets/*":["src/assets/*"]
}
}
}
最后一步
导入到tsconfig.json文件中，重启项目，就大功告成啦！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了尝试自己动手用react来写一个分页组件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
详解React-Native全球化多语言切换工具库react-native-i18n
这篇文章主要介绍了详解React-Native全球化语言切换工具库react-native-i18n,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
前端进行大文件分片上传的方案几乎都是利用Blob.prototype.slice方法对文件进行分片，用数组将每一个分片存起来，最后将分片发给后端，本文给大家介绍React大文件分片上传方案，感兴趣的朋友跟随小编一起看看吧2023-08-08
在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这篇文章主要介绍了react-native动态切换tab组件的方法，非常具有实用价值，需要的朋友可以参考下2018-07-07
React 中如何将CSS visibility 属性设置为 hidden
这篇文章主要介绍了React中如何将CSS visibility属性设置为 hidden,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
本文主要介绍了React 三大核心属性，主要包括State属性，Props属性，Refs属性，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2021-06-06
使用Electron构建React+Webpack桌面应用的方法
本篇文章主要介绍了使用Electron构建React+Webpack桌面应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本文介绍了ReactNative实现的横向滑动条效果,本文结合示例代码给大家介绍的非常详细,补充介绍了ReactNative基于宽度变化实现的动画效果,感兴趣的朋友跟随小编一起看看吧2024-02-02
本文介绍了如何在React项目中通过iframe嵌入百度网站的步骤,首先创建一个Baidu.js组件,并在该组件中设置iframe来加载百度,然后在App.js中引入并使用Baidu组件,还讨论了因安全策略可能无法加载某些网站的问题,需要的朋友可以参考下2024-09-09
最新评论