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

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

Мы рассмотрим сокращение путей в 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 extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

Для того чтобы 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

Next Generation Frontend Tooling

Если мы используем 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 is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Если же мы собираем продукт на 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

The JavaScript module bundler

Для того чтобы использовать алиасы в 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

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