Почему Vite и Rollup не могут правильно обрабатывать абсолютные импорты?

Как можно настроить проект так, чтобы Rollup не выдавал ошибку при попытке разрешения импорта компонентов с абсолютным путем, необходимо внести изменения в настройки Vite. Как можно исправить это без использования alias'ов типа @, ~ и т. д.? Благодарю за помощь.
  • 23 апреля 2024 г. 15:10
Ответы на вопрос 2
Проблема с обработкой абсолютных импортов возникает из-за того, что большинство сборщиков модулей, включая Vite и Rollup, не поддерживают такой формат импортов "из коробки". 

Для того чтобы настроить проект так, чтобы Rollup правильно обрабатывал абсолютные импорты, можно воспользоваться плагином `@rollup/plugin-node-resolve`, который позволяет разрешать модули из папок `node_modules` и других мест. 

Пример конфигурации Rollup с использованием плагина `@rollup/plugin-node-resolve`:

```javascript
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    nodeResolve()
  ]
};
```

Если вы хотите избежать использования alias'ов типа @, ~ и т. д., можно настроить плагин `@rollup/plugin-node-resolve` так, чтобы он разрешал абсолютные импорты из определенных папок. Например, чтобы Rollup мог разрешать абсолютные импорты из папки `src`, можно добавить следующую опцию в конфигурацию:

```javascript
nodeResolve({
  rootDir: path.resolve(__dirname, 'src')
})
```

Таким образом, Rollup будет искать модули начиная с указанной директории `src`, что позволит использовать абсолютные импорты без использования alias'ов.
Привет. У меня вот так сделано: 
resolve: {
			alias: {
				"@": path.resolve(__dirname, "./src"),
				features: path.resolve(__dirname, "./src/features"),
				assets: path.resolve(__dirname, "./src/assets"),
				helpers: path.resolve(__dirname, "./src/helpers"),
				utils: path.resolve(__dirname, "./src/utils"),
				interfaces: path.resolve(__dirname, "./src/interfaces"),
			},
		},


также в tsconfig в compilerOptions:
"paths": {
			"@/*": ["src/*"],
			"features/*": ["src/features/*"],
			"assets": ["src/assets"],
			"helpers": ["src/helpers"],
			"utils": ["src/utils"],
			"interfaces": ["src/interfaces"]
		},
Похожие вопросы