react typescript @别名的使用

1、config/webpack.config.js中找到alias,添加"@": path.resolve(__dirname,'../src'),如下:

TypeScript 复制代码
alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        "react-native": "react-native-web",
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          "react-dom$": "react-dom/profiling",
          "scheduler/tracing": "scheduler/tracing-profiling",
        }),
        ...(modules.webpackAliases || {}),
        "@": path.resolve(__dirname,'../src')
},

2、tsconfg.json中配置,新增"paths":{"@/*":["./src/*"]}

TypeScript 复制代码
{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "include": [
        "src"
    ]
}

3、重启收工

相关推荐
10年前端老司机11 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安11 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
clownAdam12 小时前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~12 小时前
phpstudy .htaccess 文件内容
java·开发语言·前端
@PHARAOH14 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了14 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER14 小时前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star14 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端14 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏14 小时前
前端面试-箭头函数
前端·面试·职场和发展