Класс прототипа из другой библиотеки

Question

Я пытаюсь создать класс-прототип из другой библиотеки.
Основная библиотека: https://github.com/wakirin/Litepicker
Библиотека-прототип: https://github.com/wakirin/litepicker-module-ranges

Я пытался «поиграть» с конфигурацией веб-пакета, но не нашел работающего решения.
Он отлично работает с тегами <script>, но не работает с import.

console.log('enableModuleRanges' in Litepicker.prototype);

<script src="https://cdn.jsdelivr.net/npm/litepicker@1.2.1/dist/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/litepicker-module-ranges@0.0.1/dist/index.js"></script>

И когда я пытаюсь использовать import (в другом Angular проекте):

import Litepicker from 'litepicker';
import 'litepicker-module-ranges';

Это не работает и нет ошибок в консоли браузера.

Answer 1

Краткий ответ

Взгляните на webpack-externals export-loader и внедрите его на псевдониме litepicker, пожалуйста.

Длинный ответ

Сценарии litepicker помещают объект Litepicker в окно, поэтому очевидно, что при добавлении тегов <script> все работает.

Но с webpack:

Webpack скомпилирует каждый модуль (файл - в вашем случае псевдоним, который вы указали для litepicker) с загрузчиками - и выведите его module.exports или экспортируйте объект в текущий файл, из которого он был импортирован.

Итак, давайте проверим, что module.exports / export импорта litepicker - это window.Litepicker. Это делается с помощью export-loader. Добавьте этот загрузчик в конфигурацию вашего веб-пакета, пожалуйста:

{ test: /litepicker/, loader: 'exports-loader?Litepicker=window.Litepicker' }

Теперь эта строка:

import Litepicker from 'litepicker';

преобразуется в нечто подобное в связках:

var litepicker_1 = __importDefault(__webpack_require__(/*! litepicker */ "litepicker"));

и webpack_window_litepicker('<litepicker_alias>') вернет module.exports = __WEBPACK_EXTERNAL_MODULE_litepicker__;

Кроме того, добавьте его в качестве внешней конфигурации: externals: { Litepicker: 'Litepicker', },

----------------- После клонирование репозитория waki ------------------

1) добавить псевдоним litepicker:

resolve: {
   alias: {
      'litepicker': 'litepicker/dist/js/main'
   }
}

2) Изменено регулярное выражение загрузчика:

{ 
    test: /litepicker\/dist\/js\/main/, 
    loader: 'exports-loader?Litepicker=window.Litepicker'
 }