Описание структуры библиотеки
Библиотека состоит из большого количества функций и классов, написанных на TypeScript, при этом как правило каждая функция или каждый класс находятся в отдельном файле. В этом отношении она похожа на lodash (ссылка на репозиторий lodash), однако в отличие от последнего все функции тщательно организованы по папкам. Это удобно для разработчиков, но неудобно для пользователей: ведь чтобы импортировать нужную функцию себе в проект, нужно знать, в какой папке она находится:
import { function1 } from "library-name/directory1/directory2/directory3";
Чтобы решить эту проблему, всё функции импортированы в index.ts
и реэкспортированы из её. Теперь, пользователь может любую функцию получить как:
import { function1 } from "library-name";
Сборка библиотеки Webpack-ом в прошлом
Библиотека компилировалась в index.js
(правда, было два дистрибутивных файла - один для браузерного JavaScript, другой - для NodeJS; в настройках Webpack-а специально для этого есть опция node: boolean | object
); прилагался файл index.d.ts
.
Когда я импортировал библиотеку в потребляющий проект и тоже собрал его Webpack-ом в режиме production
, то обнаружил, что неиспользованные функции не были отсечены Webpack-ом из выходного файла. Могу предположить, что Webpack собрал все исходные файлы в одну монолитную структуру, которую он сам же не может декомпозировать с целью отбросить неиспользуемое.
Честно говоря, я уже не вспомню, какие настройки были у Webpack-а в то время, но определённо была настройка output: { libraryTarget: "umd" }
.
В тот момент я поступил просто: стал поставлять библиотеку в некомпилированном виде, то есть в виде набора TypeScript-файлов. Вышеописанную проблему это решило: при продакшен-сборке потребляющего проекта всё, что не использовалось, отсекалось Webpack-ом. Кроме того, больше не нужно было собирать отдельные файлы для бразузерного JavaScript и NodeJS. Но возникли другие проблемы.
Проблемы при поставке библиотеки в виде набора TypeScript-файлов
Теперь компиляция библиотеки из TypeScript в JavaScript ложится на потребляющий проект. Я стал подозревать, что это значительно увеличивает время Webpack-компиляции по сравнению с тем случаем, когда идёт откомпилированный JavaScript файл в комплекте с .d.ts
-файлом. Если это так, то одной этой причины достаточно для того, чтобы рассмотреть вопрос о возвращении в библиотеку компиляции в JavaScript.
Другая проблема: при сборке точки входа для NodeJS с использованием плагина WebpackNodeExternals
нужно указывать, что вышеописанную библиотеку нужно добавлять к точке входа. Небольшое неудобство, но в идеале чтобы добавление библиотеки не влекло за собой изменение конфигурации Webpack.
Итоговый вопрос
Итак, если уж и возвращать компиляцию библиотеки в JavaScript, то Webpack необходимо настроить таким образом, чтобы в процессе продакшен-сборки потребляющего проекта (также собираемым Webpack-ом) неиспользуемые функции и классы библиотеки были отсечены. Некоторые функции библиотеки используют другие; отсечены должны быть те, которые не используются ни напрямую в потребляющем проекте, ни косвенно через другие функции. Какими настройками Webpack этого добиться?
Кстати говоря, если посмотреть некоторые библиотеки, например серию @aws
, то там вообще идёт аж несколько вариантов дистрибутивов в одном пакете: обычный JavaScript-файл, вариант esm.js
, где-то.mjs
есть... Надеюсь, нет необходимости подготавливать всё это.
Почему нельзя просто обойтись компилятором TypeScript-а без Webpack?
Чаще всего это можно, но если мы пишем UI-кит для какого-нибудь фреймворка типа Vue, то там в исходниках могут быть не только TypeScript-файлы, но также и Vue-компонеты .vue
, а те в свою очередь используют препроцессоры типа Pug и Sass. Тут уже однозначно Webpack. Как правило, подобные библиотеки включают в себя десятки компонентов, но реально использоваться будут лишь несколько, соответственно всё, что не используется в потребляющем проекте, необходим отсечь в процессе продакшен-сборки Webpack-ом.