Создаём npm пакет, совместимый с CJS, ESM, написанный на TypeScript

[oploshka]

Добро пожаловать в мир неописанной боли).
Билды я так понял у вас строятся через tsc (я обычно использовал webpack), но в целом есть и другие варианты сборки (правда документации маловато и лучше искать по сторонним схожим пакетам). Возможно стоит посмотреть esbuild (как пример используется в vue/core для билда). Есть так же возможность запустить esm в cjs через esm-to-cjs (вроде был этот пакет и это на всякий случай).

[naumov_evg]

Спасибо за принятие в коллектив)

я обычно использовал webpack

webpack'ом будет полезно сбилдить пакет, если мы хотим его использовать сразу в браузере без всяких транспиляций (как jquery например), но не всякому пакету это нужно.

Возможно стоит посмотреть esbuild 

не впервый раз слышу про него, но никак не затащу на пробу в проект) в след. проекте попробую

Есть так же возможность запустить esm в cjs через esm-to-cjs

интересный пакет, но вроде как просто меняет одно на другое (может даже регулярками :)) если это так, то звучит не очень надежно, тем более у пакета есть ограничение на трансформацию. Попробовал бы этот пакет от безвыходности ситуации, а так бы не стал

[fransua]

Спасибо за инфу про тайпинги, все никак не мог понять, как их правильно прописывать.
Тоже компилирую код тайпскриптом, а затем уже собираю бандлером. Получается удобнее чем вебпак с кучей плагинов запускать.
Еще могу посоветовать полезный пакет ttypescript который позволяет добавлять плагины в процесс компиляции. Например, для исправления алиасов, добавления ".js" к имени файла в импорте.

[naumov_evg]

Тоже компилирую код тайпскриптом, а затем уже собираю бандлером. Получается удобнее чем вебпак с кучей плагинов запускать.

звучит интерестно, можете, пожалуйста, подсказать как вы это делаете? А то иногда вебпак тащить очень не хочется в проект

Еще могу посоветовать полезный пакет ttypescript 

Видей, крутой пакет. Я когда первый раз увидел его, подумал, что он сможет как-то решить проблему (хотя бы частично) интерфейсов в typescript, чтобы их можно было использовать в рантайме. Но видимо, следует ждать апгрейда js до нормальных интерфейсов

[fransua]

Тайпскрипт компилятор компилирует .ts файлы в папку ./dist/esm/ в es формате. Rollup (или webpack, esbuild...) собирает все в 1 файл (или несколько чанков) и грузится в браузер. Можно не собирать все либы, браузеры умеют превращатьimport { smth } from 'somewhere' в запрос к серверу. А с помощью importmaps можно объяснить куда ходить.
Здесь можно посмотреть конфиги: [https://www.honeybadger.io/blog/import-maps/]

А как интерфейсы можно использовать в рантайме?

[naumov_evg]

Возьму на заметку, спасибо.

А как интерфейсы можно использовать в рантайме?

Теоретически можно сделать трансформацию через ttypescript и преобразовать интерфейс в какую-нибудь сущность, но только пользы в этом никакой не будет, если нельзя проверить интерфейс через instanceof.

А интерестный пример преобразования typescript типа есть в vue3 defineProps. В defineProps передаётся дженерик с параметрами а сборщик преобразует дженерик в нормальный js'овый объект. (кстати этим и связаны ограничение на определение типов defineProps)

[fransua]

да, для пропсов можно заморочиться и написать трансформер для ttypescript.