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

Пользователь

от magali , в категории: JavaScript , месяц назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от hoyt.jerde , месяц назад

@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";


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