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

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