react ts 项目如何配置路径别名？
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".", // 路径配置
"paths": {
"@/*": [
"src/*"
]
},
"target": "ES2020",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, // 允许编译 JavaScript 文件
"skipLibCheck": true, // 跳过所有声明文件的类型检查
"esModuleInterop": true, // 禁用命名空间引用 (import * as fs from "fs") 启用 CJS/AMD/UMD 风格引用 (import fs from "fs")
"allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入
"strict": true, // 启用所有严格类型检查选项
"forceConsistentCasingInFileNames": true, // 禁止对同一个文件的不一致的引用。
"noFallthroughCasesInSwitch": true, // 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）
"module": "esnext", // 指定模块代码生成
"moduleResolution": "node", // 使用 Node.js 风格解析模块
"resolveJsonModule": true, // 允许使用 .json 扩展名导入的模块
"isolatedModules": true, // 将每个文件作为单独的模块
"noEmit": false, // 不输出(意思是不编译代码，只执行类型检查)
"jsx": "react-jsx",
"noUnusedLocals": false, // 报告未使用的本地变量的错误
"noUnusedParameters": false, // 报告未使用参数的错误
"experimentalDecorators": true, // 启用对ES装饰器的实验性支持
},
"include": [
"src"
],
"exclude": [
"node_modules",
"build",
"**/*.spec.ts"
] // 不进行类型检查的文件
}webpack配置同时要配置别名：
react 项目需要通过运行?npm run eject?或?yarn eject 来暴露 webpack 配置，注意这个操作是不可逆的！
运行后会生成 config 文件夹，下面找到?webpack.config.js 进行配置：
搜索 alias 对象下面新增一行：
'@': path.resolve(__dirname, '../src/')这样通过 @/路径使用的时候 即可识别到对应路径的模块，而不会报错：Uncaught ReferenceError: xxx is not defined
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2024-05-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读