9

Описание структуры библиотеки

Библиотека состоит из большого количества функций и классов, написанных на 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-ом.

2
  • почему именно webpack? смотрели в сторону gulp и подобных?
    – Ghost
    17 фев 2022 в 18:35
  • @Ghost, потому что Gulp не предназначен для сборки JavaScript-а. Вообще-то я использую Gulp уже больше 5 лет, причём настраиваю его так, чтобы всё, что связано с JavaScript/TypeScript, он делегировал Webpack-y. Но такая структура системы сборки предназначена для создания веб-сайтов и веб-приложений, а в данном вопросе речь идёт о разработке библиотек. 17 фев 2022 в 23:59

1 ответ 1

1

советую посмотреть на такую вещь как three shaking, скорее всего, это то что вы ищите. выпилит из финального бандла неиспользованный код.

tree shaking работает только с ES-модулями и когда в package.json библиотеки указано "sideEffects": "false".

2
  • 2
    В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в Справке. 28 окт 2022 в 20:39
  • @Melnik Благодарю Вас за ответ! Пожалуйста, добавьте в Ваш ответ для его полноты, что tree shaking работает только с ES-модулями и когда в package.json библиотеки указано "sideEffects": "false". (Я попросил это сделать Вас чтобы Ваш ответ больше плюсовали и Вы быстрее набрали очки репутации). 29 окт 2022 в 1:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.