vite共享配置之---resolve

一、基本作用

resolve配置项主要用于指定如何解析模块路径，包括设置别名、指定扩展名、避免重复加载依赖以及指定解析条件等。通过合理配置resolve选项，可以更灵活地管理和优化项目中的模块解析逻辑。

二、具体配置选项

1、alias：用于为模块路径创建别名，可以简化导入路径。例如，可以将'@'映射到/src目录，这样在项目中就可以使用简化的路径来导入模块。具体配置如下：

resolve: {
  alias: {
    '@': '/src', // 将 '@' 映射到 '/src' 目录
    '@components': '/src/components', // 将 '@components' 映射到 '/src/components' 目录
    '@utils': '/src/utils' // 将 '@utils' 映射到 '/src/utils' 目录
  }
}

使用别名后，可以这样导入模块：

import Button from '@components/Button';
import { formatDate } from '@utils/date';

2、extensions：允许指定在解析模块时自动添加的文件扩展名。默认情况下，Vite会解析.mjs、.js、.ts、.jsx、.tsx、.json等扩展名。但你也可以根据需要进行自定义，例如：

resolve: {
  extensions: ['.js', '.ts', '.vue'] // 自动解析这些扩展名
}

这样，在导入模块时就可以省略扩展名：

import Example from '@/components/Example'; // 省略了 '.vue' 扩展名

3、dedupe：用于避免重复加载某些依赖，通常用于处理依赖项之间的版本冲突。例如，如果你的项目中同时使用了不同版本的React，你可以通过dedupe选项来指定只加载一个版本的React

resolve: {
  dedupe: ['react', 'react-dom'] // 避免重复加载 react 和 react-dom
}

Vite 在执行 resolve.dedupe 时会根据以下策略来决定去掉哪个版本：

1. 基于传入的顺序：resolve.dedupe 中的依赖数组顺序可能会影响去重的行为。假设你在配置中列出 react 和 react-dom，Vite 会尝试按照这个顺序去解析并去重依赖。也就是说，如果你指定了 ['react', 'react-dom']，那么如果其他依赖有多个版本，Vite 会优先使用配置中顺序靠前的版本。

2. 优先使用第一个出现的版本：在去重时，Vite 会优先保留第一个出现的版本。如果没有明确的版本要求，它会保留最早出现的版本。

三、配置示例

以下是一个完整的vite.config.js配置示例，其中包含了resolve配置项：

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // 将 '@' 映射到 'src' 目录
      '@components': resolve(__dirname, 'src/components'), // 将 '@components' 映射到 'src/components' 目录
      '@utils': resolve(__dirname, 'src/utils') // 将 '@utils' 映射到 'src/utils' 目录
    },
    extensions: ['.js', '.ts', '.json', '.vue'], // 自动解析这些扩展名
    dedupe: ['react', 'react-dom'], // 避免重复加载 react 和 react-dom
    // conditions 可以根据需要进行配置
  },
  // 其他配置项...
});