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、重启收工

相关推荐
华仔啊37 分钟前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
Bacon1 小时前
前端:从0-1实现一个脚手架
前端
Bacon1 小时前
前端项目部署实战 nginx+docker持续集成
前端
beckyye2 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东2332 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump6802 小时前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静2 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐2 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
#做一个清醒的人2 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪3 小时前
图文引用打包时的常见情景解析
前端·javascript·后端