Использование декораторов TypeScript с esbuild

Почти у каждого разработчика, которого я встречаю, есть один или несколько побочных проектов, над которыми они работают. Мой основной побочный проект (навык Alexa под названием Movie Quiz) помог мне изучить несколько новых технологий за эти годы. Работая над этим навыком, я научился всему: от DynamoDB проектирования одной таблицы до конвейеры CI/CD.

Недавно я узнал о NestJS на работе и о возможностях Inversion of Control и Dependency Injection. Так уж получилось, что кто-то любезно добавил Dependency Injection в фреймворк, который я использую для своего мастерства. Кроме того, у меня были трудности с получением некоторых обновлений навыков через сертификацию, поэтому мне показалось, что пришло время внедрить DI и написать ~~больше~~ несколько модульных тестов.

Проблемы с esbuild

Esbuild — это сверхбыстрый сборщик машинописных текстов. Эта скорость достигается за счет полного игнорирования машинописного текста. Проблема заключается в том, что внедрение зависимостей, которое я хотел использовать, зависит от декораторов TypeScript. Мне пришлось включить emitDecoratorMetadata и experimentalDecorators в моем файле tsconfig, но поскольку esbuild просто игнорирует это, я получаю только ошибки.

Замедление сборки

Решение состояло в том, чтобы получить подключаемый модуль, который сводил на нет всю производительность, полученную за счет игнорирования TypeScript. Плагин запускает каждый машинописный файл через tsc, прежде чем передать его в esbuild.

Сначала установите пакет esbuild-plugin-tsc:

pnpm install -D esbuild-plugin-tsc

Теперь импортируйте его и передайте в конфигурацию esbuild. Я использую esbuild с бессерверным стеком, поэтому параметры немного вложены друг в друга, но вы также можете использовать плагины напрямую с esbuild.

import esbuildPluginTsc from 'esbuild-plugin-tsc';
...
const handler = new sst.Function(stack, 'Handler', {
  nodejs: {
    esbuild: {
      plugins: [
        esbuildPluginTsc({
          tsconfigPath: path.join(HANDLER_ROOT, 'tsconfig.json'),
        }),
      ],
    }
  }
});

Используйте правильный формат

Помимо использования плагина, мне пришлось обновить параметры esbuild для создания вывода в формате commonjs. Хотя это было сложно понять, это было довольно легко реализовать. Просто установите для параметра format значение cjs.

В бессерверной функции стека это делается в конфигурации nodejs:

nodejs: {
  format: 'cjs',
  esbuild: {
    ...
  }
}

Обзор

В этой статье вы увидели, как использовать декораторы в проекте TypeScript, связанном с esbuild. Будем надеяться, что декораторы скоро будут стандартизированы, и нам не придется обо всем этом беспокоиться. А пока я надеюсь, что эта статья избавит некоторых людей от разочарования, связанного с тем, чтобы заставить это работать!

:::информация Также опубликовано здесь

:::