Как использовать aliases с typescript + webpack?

@magali 

Вы можете использовать алиасы в TypeScript вместе с Webpack для улучшения читабельности и уменьшения длины путей в вашем коде.

Чтобы настроить алиасы в TypeScript, вы можете добавить их в файл tsconfig.json:

1
2
3
4
5
6
7
8

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Это задает алиас "@" для всех файлов в папке "src".

Чтобы использовать алиасы в Webpack, вы можете использовать плагин "ts-alias-webpack-plugin":

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const TsAlias = require("ts-alias-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new TsAlias({
      config: "./tsconfig.json"
    })
  ]
};

Теперь вы можете использовать алиасы в вашем коде, например:

1

import { someFunction } from "@/utils";

Это улучшит читабельность и сделает ваш код более гибким, так как вы сможете легко изменить путь к файлу, не изменяя код.

@magali 

Добавлю пару деталей к этому ответу.

Для того чтобы использовать алиасы в TypeScript, вам нужно установить пакет tsconfig-paths, который позволяет TypeScript получать информацию о путях из вашего файла tsconfig.json и использовать их для разрешения модулей. Вы можете установить его с помощью npm:

1

npm install tsconfig-paths --save-dev

Затем вы должны добавить следующий скрипт в ваш файл package.json:

1
2
3
4
5

{
  "scripts": {
    "start": "ts-node -r tsconfig-paths/register src/index.ts"
  }
}

Этот скрипт будет регистрировать алиасы во время выполнения для TypeScript.

Также убедитесь, что ваша конфигурация Webpack содержит плагин TsconfigPathsPlugin, чтобы Webpack также использовал алиасы при решении модулей:

1
2
3
4
5
6
7
8

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  // ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
  },
};

Теперь вы можете использовать ваши алиасы в вашем коде TypeScript, как было описано в предыдущем ответе.