Как исправлять ошибки в пакетах установленных через npm?

Question

[Александр Маджугин]

Всё больше библиотек распространяется только в виде npm пакетов. Уже у многих не встретишь собранной версии которую просто можно подключить на странице сайта и получить работающую библиотеку.

В итоге приходится ставить через npm и собирать всякими галпами. Собранные таким образом пакеты часто неработоспособны. Как бороться с такого рода ошибками?

Где прочитать про "магию сборки"? Все что пытаюсь нагуглить сводится к "введите эти команды", без поясненний как это работает. Обращение к знакомыми верстальщикам не помогло - они сами не понимают как это работает.

Пример:
Установил библу bitcoinjs-lib как в документации.
Использую простейший код:

import Bitcoin from 'bitcoinjs-lib';

let key = Bitcoin.ECKey.makeRandom();
console.log(key);

Получаю ошибку:

Что делать дальше не понятно. Догадываюсь только что какая-то проблейм с types.js который является зависимостью bitcoinjs-lib. Но как это лечить? Попробовать поберебирать версии? Как-то изменить параметры сборки? Вообще это может быть проблемой сборкщика или это однозначно проблема зависимостей?

Comments

[cssfish]

покажите, на уровне файлов и папок, куда вы данный код пишите
А в целом 90% проблем решается через чтение issues у проекта на гитхабе.

[Александр Маджугин]

cssfish, я бы больше хотел разобраться с подходом, а не конкретно этой ошибкой.

Но так вот: .

Мой код в bitcoin.js

Ошибка всегда начинается от последней строки, даже если это комментарий.

Мне вообще не очень понятно как это

[cssfish]

Александр Маджугин, ну тут по картинкам - только гадать. вариантов же может быть масса, куда bitcoin.js подключается и что вы там в ноде запускаете с каким конфигом...

попробуйте оставить там один console.log - возможно и он не сработает )

а про "магию сборки" не очень ясно, если речь про ноду то можно у кантора курс глянуть например.
а так я выше уже писал - чаще всего все через issues решается ,т.к. там же попутно выясняется что разработчики тоже косячат, документация часто не соответствует текущему коду и прочее.

[Александр Маджугин]

cssfish, в браузер он подключается. Подключается собственно собранный файл.

а про "магию сборки" не очень ясно, если речь про ноду то можно у кантора курс глянуть например.

Что делает сборщик? Как собирает и компанует библиотеки, как пробовать другие версии зависимостей?

[cssfish]

Александр Маджугин, думаю тут у вас в базовых терминах путаница и оттого понять друг друга сложно.
Есть нода - среда исполнения ,внутри которой все - модули, в т.ч. подключаемые пакеты. А пакет это грубо говоря код + метадата в package.json. Упаковка кода в пакеты нужна для распространения кода через пакетные менеджеры и их репозитории. И даже ваш проект локальный это тоже по сути пакет т.к. есть package.json в нем).

Когда вы пишите про "магию сборки", "сборщик" - неясно, вы про менеджер пакетов? про сборку чего-то таск-менеджером?

Версиями и прочим занимается менеджер пакетов. Отталкивается от конфига в каждом конкретном пакете. Следует semver.

А если задача просто получить js в обход npm то можно ее из node_modules же взять или в том же issues поискать. В приведенном выше примере либы в Issues я минимум пару таких тем с готовой js либой для подключени в документ нашел...

[Александр Маджугин]

Я понимаю что такое менеджер пакетов, нода и так далее.

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

То что версиями занимается менеджер мне тоже понятно и понятно что они хранятся в json конфиге. Я все это вижу. Но например не понятно как указать другую версию пакета менеджеру. Например когда я пишу "npm install bitcoinjs-lib" как я могу выбрать версии устанавливаемых зависимостей? Что могу сделать чтобы попытаться устранить ошибку?

Например с apt я могу увидеть доступные версии:
apt-cache showpkg {пакет}
И попробовать установить другую, не последнюю: apt-get install {пакет}={версия}

Как с npm такое провернуть?

[cssfish]

то что вы называете сборщик- принято называть "таск-менеджер".
когда вы пишите npm install <пакет> - менеджер пакетов ставит последнюю версию пакета, а версии зависимостей берет из package.json

если нужен пакет определенной версии то можно использоватьnpm install <package>@<version>, вроде это без проблем гуглится . ИЛи можно версию прописать прямо в package.json своем и потом делать npm i

а если хотите версии пакетов (зависимостей пакета) еще менять - то можно форкнуть репо и прописать в package.json другие версии зависимостей... но вот чтоб это заработало, это другой вопрос )

[Александр Маджугин]

cssfish, все равно ничерта не понятно.
Давайте пойдём другим путем - я попробую сделать ванильный файлы для подключения в браузер. Просто чтобы там появилась эта библа в глобальном пространстве.

Как мне это сделать?

Как вообще найти гайд по использованию этой, с позволения сказать, экосистемы разработки?

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

Т.е. сделал я:
[code]
npm install bitcoinjs-lib
npm install ecpair bip32
[/code]

Дальше же надо стаск-менеджерить (так это надо называть?) файл итоговый который можно будет в браузер подключить просто. Как это сделать?
Потому что сейчас у меня в локальной папке только исходиники. Спасибо - я их и без этой магии мог скачать wget'ом с гитхаба.

[cssfish]

Александр Маджугин, давайте тогда пойдем маленькими шажками.

У нас есть 2 среды исполнения js-программ:
1) браузер
2) node.js

Они отличаются, как минимум:

1) окружением, api. Например, в ноде мы можем писать и читать файлы, а в браузере этого нет. А в браузере мы можем оперировать document и различными api браузера, которых нет в ноде.

2) способом подключения других js к программе. В браузере js традиционно мы подключаем через теги script. Ну и А в ноду скрипты мы подключаем через require, предварительно установив их через `npm i` например.
На самом деле вариантов больше, но пока неважно.

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

Т.е. когда вы пишитеnpm install bitcoinjs-lib - вы ставите пакет в ноду, и все (ну т.е. не в ноду, а в папку проекта, для использования нодой).
К браузеру это не имеет ВООБЩЕ никакого отношения.

все так?

[Александр Маджугин]

cssfish, да, всё так, я это понимаю.
Но потом я запуская сборщик который собирает мне файл для подключения в браузер.
В частности для данного проекта я использую bitrix-cli чтобы собрать экстеншен, просто потому что привык. Как я понимаю это обертка над чем-то вроде gulp

[cssfish]

заострю внимание (не про эту либу а вообще):

0) если либа написана под более новую версию ноды, а запускаем на старой (про сборки и браузеры вообще речи нет), то не заработает, верно?

1) если некая программа написана на js но ТОЛЬКО под node.js. (например, она читает файлы и т.д.). Как она заработает в браузере, если пропустить ее через некие сборщики?

Далее:

2)

потом я запуская сборщик который собирает мне файл для подключения в браузер. В частности для данного проекта я использую bitrix-cli чтобы собрать экстеншен, просто потому что привык.

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

3)

Как я понимаю это обертка над чем-то вроде gulp

Если речь про https://github.com/bitrix-tools/cli то это определенно не обертка над галпом. Но, как и галп, это программа для ноды, которая производит манипуляции над файлами разных типов (картинки ,стили скрипты и тп), используя сторонние либы и свой конфиг.

Короче говоря, для чистоты экперимента лучше вообще ничего лишнего не использовать.
Сделаем новую папку, npm init.

Далее идем на https://github.com/bitcoinjs/bitcoinjs-lib и уточняем моменты:

а) под какую это платформу написано? видим:

for node.js and browsers

отлично!

б) под какую это версию ноды? видим:

Typically we support the Node Maintenance LTS version.

. плюс в примерах:

node >= v14

убеждаемся что все ок

в) как поставить? (ну тут более-менее ясно, npm i)

4) ну и главное, как под браузер собрать? видим:

The recommended method of using bitcoinjs-lib in your browser is through Browserify.

Т.е. сами разработчики либы напрмую говорят - используйте Browserify (либа ,которая собирает js с require в браузерный).
Так почему вы вместо него берете bitrix-cli ?

[Александр Маджугин]

Вы решили что данный сборщик корректно соберет либу под браузер из данного пакета? на чем основано это предположение?

Это часть моего вопроса. Собственно у меня нет никаких оснований для этого, потому что для меня работа этого сборщика не прозрачно. Я не понимаю как они работают и как должны. И не могу найти адекватной инфы по этому вопросу. Все завалено только обезьянними примерами.

Так почему вы вместо него берете bitrix-cli ?

Потому что Browserify никогда не использовал - 1.
2 Потому что это должно стать частью экстеншена где будет другой код.

Ну ок - попробую разобраться с Browserify