tsconfig.json
代码语言:javascript复制{
"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 对象下面新增一行:
代码语言:javascript复制 '@': path.resolve(__dirname, '../src/')
这样通过 @/路径使用的时候 即可识别到对应路径的模块,而不会报错:Uncaught ReferenceError: xxx is not defined