知识碎片：关于Next,TypeScript,WebPack 中设置路径别名 BaseUrl ?在开发过程中你肯定遇到过

前文

baseUrl如果翻译过来就是基础路径.本文主要简单介绍下这个配置项分别在tsconfig.json,webpack.js,next.config.json中的作用.

正文

TypeScript 中 baseUrl 的作用

在 TypeScript 中, baseUrl是tsconfig.json文件中的一个配置选项，它主要用于配置模块解析的基路径, 简单的说就是解析.ts,.tsx文件类型开始的地方.

主要存在下面这些作用:

简化模块路径

当你使用 baseUrl 配置后，可以省略复杂的相对路径。例如：

// tsconfig.json 配置
{
  // compilerOptions 编译配置
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

上面我们在tsconfig.json中添加了baseUrl,但是如果没有 baseUrl，我们导入模块就只能是这样.

import { MyComponent } from "./src/components/MyComponent";

因为在tsc在解析转化ts到js的时候只能从项目根目录去进行执行编译转化，但是配置了baseUrl后，我们可以这样：

import { MyComponent } from "components/MyComponent";

模块解析：

TypeScript 编译器会以 baseUrl 为基准解析非相对路径模块。这在大型项目中有助于减少路径嵌套带来的复杂性。

配合paths使用：

baseUrl 通常与 paths 配合，定义别名以进一步优化路径管理。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  }
}

使用后：

import { MyComponent } from "@components/MyComponent";

完整的路径，如果没有配置

import { MyComponent } from "./src/components/MyComponent";

在 Webpack 中 baseUrl 的作用

严格来说，Webpack 本身并没有一个直接叫 baseUrl 的配置。它其实是 resolve.alias 这个配置：

resolve.alias

Webpack 使用 resolve.alias 实现类似 TypeScript baseUrl 和 paths 的功能，用于简化模块路径的解析。例如：

module.exports = {
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/')
    }
  }
};

然后你可以在代码中使用：

import MyComponent from '@components/MyComponent';

Next项目中进行配置

Next.js 是一个内置了 TypeScript 和 Webpack 支持的框架，因此上面的配置通常都是可以直接在Next项目中进行生效.

Next.js 默认支持 TypeScript，你可以在 tsconfig.json 中配置 baseUrl 和 paths，以简化模块路径。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

上面配置简化模块的导入路径

// 原始导入方式
import MyComponent from "../../components/MyComponent";

// 使用 baseUrl 和 paths 后
import MyComponent from "@components/MyComponent";

注意事项： • 如果你修改了 baseUrl 或 paths，需要重新启动开发服务器.

Next.js 提供了自定义 Webpack 配置的能力，你可以通过 next.config.js 配置路径别名，以实现类似 alias 的功能.

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, 'components'),
      '@utils': path.resolve(__dirname, 'utils'),
    };
    return config;
  },
};

允许在模块导入的时候使用路径别名.

// 原始导入方式
import MyComponent from '../../components/MyComponent';

// 使用别名后
import MyComponent from '@components/MyComponent';

注意⚠️

在Next开发过程中,如果你是使用Typescript进行项目开发，那么你一般在tsconfig.json中进行配置路径别名就OK,因为Next会自动读取tsconfig.json中的路径别名配置合并到next.config.ts中的webpack配置中,所以不需要在next.config.ts以及tsconfig.json中两处定义同样的别名设置（或者重复设置）.

特殊场景除外，如果你在你项目中除了使用.ts,还使用了其他js模块并且使用了路径别名进行导入模块文件,那么你需要在webpack中配置路径别名.

如果存在错误🙅，请大佬们指粗，避免误导！希望对你开发有帮助！