Как заменить цепочки ../../ на @ при импорте модулей JavaScript?

Question

[Persotr27]

Здравствуйте.

Вместо вот этого:

import { User } from "../../../scenes/Account/User";
import { THEME_COLOR } from "../../constants/theme";
import { getUser } from "../services/userServices";

Надо, чтоб было вот это:

import { User } from "@scenes/Account/User";
import { THEME_COLOR } from "@constants/theme";
import { getUser } from "@services/userServices";

Как достичь такого эффекта?

Answer 1

[Сергей Соколов]

Если дело в WebPack, то см. resolve:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

...

// было:
import Utility from '../../utilities/utility';

// стало:
import Utility from 'Utilities/utility';

Answer 2

[Alex]

Нативно -- никак. Это "фичи" сборщиков. В основном называются alias. Ищите в документации вашего сборщика, если используется таковой.

Answer 3

[Swert]

Если используете Vitejs то в vite.config.js пропишите это:

import path from 'path'

/**
 * @type {import('vite').UserConfig}
 */
export default {
  alias: {
    '/@': path.resolve(__dirname, 'src')
  }
....