tsconfig.json中的路径配置，编译项目时paths自动消失解决办法！！！

2024-07-15 01:15| 来源: 网络整理| 查看: 265

tsconfig.json配置相关

**vscode 编辑器只在打开项目工程的时候加载一次 tsconfig.json 的配置信息。

如果正确配置这webpack alias 和 tsconfig.json 这两个文件，且模块确实存在，编译器不报错的情况下，重启一次就好了**

include * 需要编译哪些文件

compilerOptions * 具体配置项

tsconfig.json常用配置，tsconfig.json最全配置 - 知乎 (zhihu.com)

{ "compilerOptions": { "allowUnreachableCode": true, // 不报告执行不到的代码错误。 "allowUnusedLabels": false, // 不报告未使用的标签错误 "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句 "baseUrl": ".", // 工作根目录 "experimentalDecorators": true, // 启用实验性的ES装饰器 "jsx": "react", // 在 .tsx文件里支持JSX "sourceMap": true, // 是否生成map文件 "module": "commonjs", // 指定生成哪个模块系统代码 module”选项的参数必须为 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext' "strict": true, //所有严格检查的总开关 "noImplicitAny": true, // 不允许隐式的any类型 "noImplicitThis": true, // 不允许使用不明确类型的this "strictNullChecks": true, //严格检查空值 "removeComments": true, // 是否移除注释 "types": [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件 "node", // 引入 node 的类型声明 ], "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样 "src": [ //指定后可以在文件之直接 import * from 'src'; "./src" ], }, "target": "ESNext", // 编译后的代码版本 "ES3", "ES5", "ES6", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "ESNext" "outDir": "./dist", // 输出目录 "outFile":"./dist/index.js",//outFile 仅支持module "amd" 和 "system" 模块 "declaration": true, // 是否自动创建类型声明文件 "declarationDir": "./lib", // 类型声明文件的输出目录 "allowJs": true, // 允许编译javascript文件。 "checkJs": true,//是否检测js是否符合ts语法，默认false "noEmit": false,//是否生成编译后的代码 true：不生成；false生成 "noEmitOnError": true.//语法报错时，不生成编译后的代码 "lib": [ //(默认值够用了)编译过程中需要引入的库文件的列表 "es5", "es2015", "es2016", "es2017", "es2018", "dom" ] }, // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件） "include": [ "ts/*" ], // 指定一个排除列表（include的反向操作） "exclude": [ "test.ts","node_modules" ], // 指定哪些文件使用该配置（属于手动一个个指定文件） "files": [ "demo.ts" ] } tsconfig.json配置路径注意点

如果按照上述的路径配置，编译项目时paths自动消失，就用下面的外部引入

1. 新建paths.json { "compilerOptions":{ "baseUrl":"src", "paths":{ "@/*":["*"] } } } 2. tsconfig.json中引用 { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react" }, "include": [ "src" ], // 此处引入路径文件 "extends": "./paths.json", "exclude": [ "src/**/*copy.ts", "src/**/*copy.tsx", "src/**/*.USELESS.tsx", "USELESS" ] } 3. 重启项目

没毛病，可以快乐玩耍了！

4. 经典回顾重点：webpack配置的只能js用

想要ts也能用alias，必须在tsconfig.json中再次配置alias！！！如果遇到写完paths，编译项目paths消失的问题，引入外部路径文件

https://github.com/facebook/create-react-app/issues/5645

【本文地址】

公司简介

联系我们