🛣️前端项目中的路径解析

这里说的路径解析分两种

1. Webpack 打包配置项中的 alias
2. jsconfig.json 中的 compilerOptions

Webpack 打包配置项中的 alias

相信很多人都很喜欢这个配置，因为在引用其他目录下的文件时，通过 ./../utils/tools.js 这种写法显得特别的笨重。

可是如果在配置了 alias 这个属性就会好很多。

这块不多说，文档讲的很详细了

解析(resolve)

jsconfig.json 中的 compilerOptions

由于 Webpack 的 alias 配置你可能会在编写代码的时候遇到一些问题。

因为通过 alias 的方式编写的路径，你并不能通过转到定义访问到源文件。

所以这个时候就需要 jsconfig.json 来帮帮你了

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "comps/*": ["./src/comps/*"],
      "config/*": ["./src/config/*"],
      "pages/*": ["./src/pages/*"],
      "resource/*": ["./src/resource/*"],
      "styles/*": ["./src/styles/*"],
      "utils/*": ["./src/utils/*"]
    }
  }
}

通过这个 jsconfig.json 你就可以解决因为使用 alias 配置而导致的无法访问源文件问题了

VSCode 中的 jsconfig.json

Create React App 无 eject 配置