Использование createjs-soundjs в веб-приложении реагирования

Question

Я хотел бы использовать https://www.npmjs.com/package/createjs-soundjs для воспроизведения звуков в реагирующем веб-приложении.

Я установил пакет нормально с npm install createjs-soundjs и это отображается в списке пакетов. Как я должен включить это в свой проект, чтобы я мог его использовать?

Я пробовал следующее:

import React from 'react';
import classNames from 'classnames';
import createjs from 'createjs';
import SoundJS from 'createjs-soundjs'; // this line causes an error

Сообщение об ошибке в консоли: soundjs-0.6.2.min.js:17 Uncaught ReferenceError: createjs не определено. Это сообщение об ошибке очень ясно, но я понятия не имею, с чего начать. Я что-то упустил?

Answer 1

Пакет SounJS не соответствует надлежащему формату CommonJS или ES6, это пакет, который позволяет предположить, что он загружен в браузер как скрипт верхнего уровня. Поэтому он сначала пытается создать глобальное значение, назначив его свойству this (который он принимает за окно), а затем пытается получить доступ к этим глобальным значениям просто createjs, Очевидно, что это не работает в контексте модуля.

Хотя есть обходной путь, код для Webpack 2 и основан на этом комментарии (который предназначен для Webpack 1):

module: {
  rules: [
    // ...
    {
      test: /createjs/,
      use: [
        'imports-loader?this=>window',
        'exports-loader?createjs'
      ]
    },
    // ...
  ]
},

plugins: [
  // ...
  new webpack.ProvidePlugin({
    'createjs': 'createjs',
  }),
  // ...
],

resolve: {
  alias: {
    'createjs': path.resolve(__dirname, '../lib/soundjs-0.6.2.combined'),
  }
},

Третья запись (resol.alias) отображает импорт createjs в файл, который я скачал и поместил в мой lib папка (что не так элегантно, как использование чего-то из npm, но теперь я уверен, что получаю. Версия npm также может работать).

Первая запись (module.rules) сообщает Webpack о первой замене this с window, а затем взять createjs Экземпляр из глобального (оконного) контекста и сделать его модулем экспорта.

Наконец, вторая запись (ProvidePlugin) предшествует всем запросам на глобальное createjs (в других модулях) с const createjs = require('createjs'),