create-react-app 项目下 alias 无效问题解决

人狠话不多, 不想看废话点击到达解决方法

问题背景

背景: 使用了脚手架 create-react-app 创建项目, 使用的是 typescript 结果使用 src/*** 的时候提示找不到

开始查找问题

从 webpack 配置开始查问题

开始从 config/webpack.conf.js 文件的 resolve.alias 找, 发现引用了 modules.webpackAliases, 打印一下发现为 {} 空对象

modules

接着找到 modules 就是 同目录下的 modules.js, 找 webpackAliases 来源, 发现来自 getWebpackAliases 函数

获取 alias 的逻辑(问题关键)

来到 getWebpackAliases 函数, 通过打印发现 baseUrl 变量时 undefined, 所以没能返回预期的内容, 初步确定问题在于没有 baseUrl, 而baseUrl 来源于参数 options

找到缺少数据的来源

找回 getModules 函数中传入 getWebpackAliases 的 options 的来源, 会发现 options 其实就是来自根目录的 tsconfig.json 的 compilerOptions 字段

解决问题

结合上面结论: 缺少baseUrl, 就可以得到解决方法, 在 tsconfig.json 文件的 compilerOptions 字段补上 baseUrl 这个字段即可, 字段值为项目的根目录, 问题就得到解决了

结论(解决方法简单的有点搞笑)

在根目录的 tsconfig.json 文件的 compilerOptions 里添加字段 baseUrl 指向项目的根目录