Сокращение путей с помощью алиасов

В данной статье рассмотрим как с помощью алиасов сократить пути для импортов. Это бывает полезно, когда вы работаете в больших проектах.

Мы рассмотрим сокращение путей в Typescript, Vite, Webpack, Rollup и ESBuild, то есть во всех популярных бандлерах для JavaScript.

С помощью алиасов можно повысить читаемость import. Вот пример как могут выглядеть плохие импорты:

import Data from '../../../data/someData';

Вот пример как выглядят хорошие импорты:

import Data from '@data/someData'

К слову, все примеры внизу будут соответствовать листингу сверху. То есть мы будем рассматривать примеры конфигураций, где вместо того чтобы писать ../../../data/someData у нас была возможность написать @data/someData.

www.typescriptlang.org

JavaScript With Syntax For Types.

Для того чтобы Typescript понимал алиасы - нам достаточно добавить следующие поля в tsconfig.json.

tsconfig.json:

{ // Добавляем директорию откуда будут строиться пути "baseUrl": ".", // Добавляем алиасы для путей "paths": { "@/*": ["src*"], "@data/*": ["src/data/*"] } }

Теперь мы можем импортировать файлы из корневой директории с помощью @ и файлы из папки src/data с помощью @data.

import someData from "@/data/someData"; // Или import someData from "@data/someData";

vitejs.dev

Vite

Если мы используем Vite без Typescript, то нам нужно указать алиасы в конфигурации Vite.

vite.config.js:

import {fileURLToPath} from "url"; import {defineConfig} from 'vite'; export default defineConfig({ // ... resolve: { alias: [ { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) }, { find: '@data', replacement: fileURLToPath(new URL('./src/data', import.meta.url)) }, ], }, // ... })

webpack.js.org

webpack

Если же мы собираем продукт на Webpack, то нам нужно написать следующее в конфигурации Webpack:

webpack.config.js:

const path = require('path'); module.exports = { //... resolve: { alias: { "@": path.resolve(__dirname, 'src/'), "@data": path.resolve(__dirname, 'src/data/'), }, }, // ... };

rollupjs.org

Rollup

Для того чтобы использовать алиасы в Rollup нам нужен плагин. Плагин можно установить следующей командой:

npm i -D @rollup/plugin-alias

Далее пишем следующий код в конфигурации:

rollup.config.js:

import alias from '@rollup/plugin-alias'; module.exports = { // ... plugins: [ alias({ entries: [ { find: '@', replacement: 'src/' }, { find: '@data', replacement: 'src/data/' } ] }) ] // ... };

esbuild.github.io

esbuild - An extremely fast bundler for the web

Для того чтобы добавить алиасы к ESBuild нужно установить плагин:

npm i -D esbuild-plugin-alias

Затем нужно добавить следующее в конфигурацию:

const esbuild = require('esbuild'); const alias = require('esbuild-plugin-alias'); esbuild.build({ // ... plugins: [ alias({ '@': path.resolve(__dirname, `./src/*`), '@data': path.resolve(__dirname, `./src/data/*`), }), ], // ... });

Если вам понравилась данная статья - то вы всегда можете перейти в мой блог, там больше схожей информации о веб-разработке.

Если у вас остались вопросы - не стесняйтесь задавать их в комментариях. Хорошего времяпрепровождения!💁🏻‍♂

Сокращение путей с помощью алиасов

🧱 Typescript

⚡ Vite

💨 Webpack

🦀 Rollup

🌝 ESBuild

Вместо заключения 🌚