Устойчивый импорт с помощью автоматически генерируемых псевдонимов TypeScript

Если вы не знакомы, пути TypeScript позволяют назначить псевдоним некоторому пути в вашем проекте. Это особенно полезно для больших проектов.

Работать интенсивнее

Например, вы редактируете код в пути components/MyComponent/src/hooks/myHook.ts, и вам нужно импортировать некоторый код сервисов. Ваш код сервисов может находиться в корне проекта рядом с components/. По наивности вы можете использовать относительный путь, например:

import { myService } from '../../../services/my-service'

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

Работаем умнее

Чтобы исправить это, добавьте пути в tsconfig.json, например:

{
   "compilerOptions":{
      ...
      "paths":{
         "@services":[
            "services/index"
         ],
         "@services/*":[
            "services/*",
            "services/index"
         ]
      }
   },
   ...
}

что изменит ваш хрупкий импорт на что-то более устойчивое, что не сломается при перемещении в новую папку:

import { myService } from '@services/my-service'

И самое приятное то, что пользователи vscode получат бесплатное понимание пути с помощью этих псевдонимов. Вы сможете ctrl+. и добавлять импорты через свои псевдонимы.

Еще проще с помощью автоматизации

Но если вы работаете с большим проектом, почему бы не избавить себя от необходимости вручную писать глобы и копировать JSON?

Я создал tsconfig-paths-autogen (1kB minified, 0 зависимостей), который автоматически создаст псевдонимы для всех папок вашего проекта. Большим изменением является переход от tsconfig.json к tsconfig.js. Я объясню, как это работает.

Предположим, что это структура каталогов вашего проекта:

src
├── a
├── b
│   └── c
│       └── d
└── e
    └── f

Если вы хотите присвоить всем этим каталогам псевдонимы, чтобы можно было:

• ссылаться на корень проекта и src,
• импортировать индексные файлы (с и без концевого /),
• переходить к подпапкам после псевдонима.

тогда ваши пути будут выглядеть следующим образом:

"paths": {
  "@a": ["a/index"],
  "@a/*": ["a/*", "a/index"],
  "@d": ["b/c/d/index"],
  "@d/*": ["b/c/d/*", "b/c/d/index"],
  "@c": ["b/c/index"],
  "@c/*": ["b/c/*", "b/c/index"],
  "@b": ["b/index"],
  "@b/*": ["b/*", "b/index"],
  "@f": ["e/f/index"],
  "@f/*": ["e/f/*", "e/f/index"],
  "@e": ["e/index"],
  "@e/*": ["e/*", "e/index"],
  "@/*": ["./*"],
  "~/*": ["../*"]
}

Это утомительно, чтобы получить все это правильно и поддерживать их. Итак, ваш новый tsconfig.js будет генерировать пути и экспортировать себя в json, что-то вроде:

// tsconfig.js
const { generatePaths } = require('tsconfig-paths-autogen');
const { onmyjs } = require('onmyjs'); // or any other tool to export this file to JSON.

module.exports = {
  compilerOptions: {
    ...
    paths: generatePaths(baseUrl, {
      // whatever you'd like to start your aliases with, can be empty.
      rootAlias: '@',
      // how far deep to alias from baseUrl
      maxDirectoryDepth: 2,
      // alias components folder but none under it.
      excludeAliasForSubDirectories: ['components'],
      // aliases for potentially excluded directories
      includeAliasForDirectories: {
        common: 'components/common',
      },
    }),
  }
}
// export to tsconfig.json
onmyjs(module.exports, 'tsconfig.json', true);

Интеграция этого в ваши скрипты сборки

Итак, теперь вы, вероятно, спрашиваете, что делать, потому что ваш инструментарий должен заново генерировать tsconfig.json и реагировать на изменения. Вот пример для вашего package.json с использованием nodemon (подробнее о npm):

  "scripts": { 
      "dev": "nodemon -w tsconfig.js --exec "run-s build:tsconfig dev:parcel"",
      "build:tsconfig": "node tsconfig.js"
      "dev:parcel": "parcel src/index.html"
  }

Обратите внимание, что этот пример использует parcel, но он не зависит от инструментария. Используйте его в webpack или как угодно!

Надеюсь, это поможет вам легче справляться с импортом. Если у вас есть вопросы, оставьте комментарий ниже. Спасибо за чтение!