Как интегрировать унаследованный JavaScript с NodeJS в браузере

Question

Гипотетический наследство сценарий:

Say У меня есть 4 скрипты, которые просто получить объединяются вместе как единый сценарий для развертывания, чтобы обеспечить утилита библиотеку с глобальным пространством имен в браузере. У меня тогда есть 1 отдельный сценарий приложения, который использует библиотеку. Что-то вроде:

<script src="library.js"></script> 
<script src="app.js"></script> 

В моем app.js сценарии вызовы выполняются с методами библиотеки через его пространство имен, как

var id = lib.id(prefix); 

Я вижу, что один из библиотеки скриптов 4 полезная утилита что я хочу превратиться в модуль узла. Я копирую его и создаю пакет и публикую его в npm для использования в новой разработке.

Проблема: теперь у меня есть две версии этого скрипта для поддержки - одна для узла и одна для старой библиотеки.

Есть ли способ иметь один общий файл, который я могу включить как в модуль узла, так и в устаревшую библиотеку? Или я задерживаю сохранение двух версий файла до тех пор, пока мы не покончим с устаревшим кодом?

Дополнительная информация:

Я смотрел на browserify и WebPack, думая, что они могут быть полезны, но и страдают от проблемы, я не знаю, как обойти. Если конечный модуль не определяет глобальные переменные, я не могу использовать модуль в устаревшем коде, так как нет необходимости в наличии команды. Другими словами, я не могу обозревать модуль узла, а затем перетащить его на устаревшую веб-страницу и использовать его в моем существующем app.js, потому что я не могу позвонить var mymodule = require('mymodule'). Есть ли способ заставить браузеру или веб-пакет определить и выставить функцию require, чтобы я мог получить доступ к моему новому модулю узла из устаревшей кодовой базы? Конечно, это не уникальный сценарий.

Answer 1

Ваш лучший выбор - использовать UMD pattern, чтобы гарантировать, что модуль может использоваться как глобальная, так и в общей системе JS (ie-node).

Образец, который подойдет вам лучше всего, это returnExports. Это гарантирует, что все экспортированные свойства либо применяются к глобальному объекту (т.е. к окну), либо к объекту модуля в узле.

Поскольку вы не используете AMD, вы можете упростить картину несколько и удалить первый кусок, если заявления по линиям 18 и 42.

Это потребует от вас реорганизовать свой код так, чтобы он вписывается в шаблон.

Есть другие шаблоны, которые вы можете использовать, например commonJsStrictGlobal, но я лично предпочитаю returnExports.