В этой статье мы с вами создадим с нуля и опубликуем в  NPM TypeScript-пакет, не забыв про Jest для покрытия тестами. Мы инициализируем проект, настроим TypeScript, напишем для него тесты в Jest и опубликуем его в NPM. Наша простая библиотека будет называтся digx. Она позволяет “выкапывать” значения из вложенных объектов по заданному пути (аналогично lodash get). Например: Для раскрытия темы этой статьи это не так важно что она делает, главное чтобы она была достаточно проста и тестируема. Модуль npm можно найти здесь. GitHub-репозиторий находится здесь. Давайте начнем с создания пустого каталога и его инициализации. Команда npm init --yes создаст файл package.json и заполнит его некоторыми дефолтными значениями (которые вы, возможно, захотите изменить). И давайте сразу настроим git-репозиторий в этой же папке. Мы будем использовать TypeScript. Давайте установим его. Далее мы создадим tsconfig.json со следующей конфигурацией: Вот наиболее важные настройки: Наш основной файл будет находиться в папке src, поэтому "files": ["src/index.ts"]. "target": "es2015", чтобы убедиться, что мы поддерживаем только современные платформы и не утяжеляем проект лишними оболочками. "module": "es2015". У нас будет стандартный ES-модуль (по умолчанию здесь CommonJS), чтобы у современных браузеров не было с ним никаких проблем; даже Node поддерживает его с 13-й версии. "declaration": true - потому что нам нужны файлы деклараций d.ts. Нашим пользователям TypeScript они точно потребуются. Большинство остальных пунктов — это просто различные необязательные проверки TypeScript, которые лично я предпочитаю включать. Откройте package.json и обновите раздел "scripts": Теперь мы можем запустить сборку с помощью npm run build... Что выдаст ошибку, ведь у нас еще нет кода, который бы мы могли собирать. Но мы начнем с другого конца. Как ответственные взрослые, коими мы являемся, мы начнем с тестов. Мы будем использовать jest, потому что он прост и прекрасен. Для того, чтобы Jest понимал TypeScript, нам потребуется пакет ts-jest. В качестве альтернативы мы можем использовать babel, но он потребует дополнительной настройки и дополнительных модулей. Не усложнять себе работу — в наших же интересах. Инициализируйте файл конфигурации jest с помощью Дальше просто прожмите Enter для каждого вопроса. Сейчас нас вполне устроят настройки по умолчанию. Это команда создаст файл jest.config.js с некоторыми значениями по умолчанию и добавит скрипт "test": "jest" в package.json. Откройте jest.config.js, найдите строку, начинающуюся с preset, и измените ее следующим образом: Наконец, создайте каталог src и наш тестовый файл src/digx.test.ts и внесите туда следующее: Эти модульные тесты дают хорошее представление о том, что мы создаем. Наш модуль экспортирует одну функцию, digx. Она принимает любой объект, строковый параметр path и опциональный параметр shouldThrow, который вызывает исключение, если вложенная структура исходного объекта не содержит указанный путь. В качестве вложенных структур могут выступать объекты, массивы, Map’ы и Set’ы. Запустить тесты можно с помощью команды npm t; Конечно, сейчас они будут выдавать ошибку — так и должно быть. Теперь откройте файл src/index.ts и скопируйте туда это: Если честно, то реализация могла бы быть и получше, но для нас важнее то, что тесты проходятся уже сейчас. Попробуйте сами, запустив npm t. Теперь, если мы запустим npm run build, мы должны увидеть каталог dist с двумя файлами, index.js и index.d.ts. Теперь мы готовы к публикации. Зарегистрируйтесь на npm, если вы еще этого не сделали. Затем залогиньтесь через свой терминал с помощью npm login. Мы всего в одном шаге от публикации нашего замечательного нового пакета. Тем не менее, есть несколько вещей, о которых нам еще нужно позаботиться. Во-первых, давайте удостоверимся, что в нашем package.json правильные метаданные. Убедитесь, что для свойства main задан наш файл "main": "dist/index.js". Добавьте "types": "dist/index.d.ts" для наших пользователей TypeScript. Поскольку наша библиотека будет использоваться как ESM-модуль, нам также необходимо указать "type": "module". Также нужно задать имя (name) и описание (description). Далее нам нужно позаботиться о файлах, которые мы хотим опубликовать. Мы бы не хотели опубликовать какие-либо файлы конфигурации или исходные, или тестовые файлы. Для этого мы могли бы воспользоваться .npmignore, где мы перечислим все файлы, которые мы НЕ ХОТИМ публиковать. Но вместо этого я бы предпочел иметь “вайтлист”, поэтому давайте воспользуемся полем files  в  package.json , чтобы указать файлы, которые мы ХОТИМ включить. Наконец, мы готовы опубликовать наш пакет. Запустите И убедитесь, что включены только необходимые файлы. Когда мы будем готовы, мы, наконец, сможем запустить Давайте создадим новый проект и установим наш модуль. А теперь давайте напишем простую программу для проверки. Это наши типы, замечательно! DIGX DIGX типы доступны прямо из коробки. Теперь запустите его с помощю node index.js, и вы должны увидеть на экране 1. Мы создали с нуля простой npm-пакет и успешно опубликовали его. Наша библиотека предоставляет ESM-модуль, типы для TypeScript и покрыта тестами с использованием jest. Никто не будет отрицать, что это было не так уж и сложно. Скоро состоится открытое занятие «CSS-in-JS. Удобный способ управлять стилями». На уроке обсудим Styled components, Linaria, Astroturf и другие инструменты упрощения работы со стилями. Регистрация открыта по ссылке для всех желающих.  Переводчик, редактор