Как правильно собрать библиотеку NPM из ES6 классов?

Question

[grabbee]

Пишу сейчас простую библиотеку. Использую синтаксис Классов, Импортов, и ASYNC/AWAIT

Настроил Webpack и Babel. - В чем я запутался:

1. Если я указываю поддерживаемые 2 версии только Хром, то пакет весит 5 Кб
   
2. Если 2 версии и более 1% - уже 10 Кб
   

И если я бабелю не указываю "useBuiltIns": "usage" - то потом у меня вылетают ошибки, что нет Рантайм регенератора. А если указываю, то размер сборки с 5Кб увеличивается уже до 55Кб.

Библиотека не самостоятельная. Она подразумевает, что её будут использовать в другом проекте, который также собирается Вебпаком с бабелем. Тогда я не понимаю, зачем включать в сборку библиотеки все нужные ей полифилы, если это сделается потом на выходе в родительском проекте.

---

Может быть там вообще не использовать ни Вебпак ни Бабель, а просто указать для библиотеки type: "module" - последние версии ноды понимают как импорт модуля Es6. Но а родительский проект тогда поймет, что этот импорт нужно будет дополнительно транспилировать? В нем то бабель используется...

Как мне оформить библиотеку, если она нужна только как дополнительный модуль для других проектов, которые в итоге собираются Вебпаком и транспилируются по своим конфигам?

Comments

[grabbee]

Я не знаю, правильно ли сделал. Сейчас попробовал type: "module" без транспиляции библиотеки. Проект собрался и работает. Но когда пробую тест написать внутри проекта с импортом этой библиотеки, появляется ошибка "SyntaxError: Cannot use import statement outside a module" и указывает на строку импорта библиотеки. Хотя отдельные тесты уже самой библиотеки работают нормально.

Answer 1

[grabbee]

Ошибка моя была в том, что я пытался @babel/plugin-transform-runtime добавлять в сборку проекта. А нужно было в библиотеке ставить и собирать с ним. Поэтому на проекте тест падал из-за того, что вебпак/бабель обычно исключает подключаемые библиотеки. Плагин добавил 5Кб и стало не 10 а 15 - всё лучше чем 55...

Answer 2

[Aetae]

Может быть там вообще не использовать ни Вебпак ни Бабель

Да, это современное решение для модулей.)
В package.json для точку входа указать не main, а module и дело с концом.
Хотя вебпак много чего полезного ещё может делать, а вот бабель для библиотеки-модуля - лишнее.

Но а родительский проект тогда поймет, что этот импорт нужно будет дополнительно транспилировать? В нем то бабель используется...

Как настроишь бабель-лоадер в проекте, так и будет транспилировать. По умолчанию он транспилирует всё, и надо специально указывать exclude, чтоб не лез в node_modules.
Если пользуетесь какими-то cli - для этого есть специальные настройки(transpileDependencies).