Mit createjs-soundjs in reagieren Web App

Question

Ich möchte https://www.npmjs.com/package/createjs-soundjs verwenden, um Sounds auf einer Web-App zu spielen.

Ich installierte das Paket normalerweise mit npm install createjs-soundjs und es wird in der Paketliste angezeigt. Wie sollte ich das zu meinem Projekt hinzufügen, damit ich es nutzen kann?

I haben versucht, die folgenden:

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

Die Fehlermeldung in der Konsole: soundjs-0.6.2.min.js: 17 Uncaught Reference: CreateJS ist nicht definiert. Diese Fehlermeldung ist sehr klar, aber ich habe keine Ahnung, wo ich anfangen soll. Fehle ich etwas Grundlegendes?

Answer 1

Das SounJS-Bundle befindet sich nicht im richtigen CommonJS- oder ES6-Format. Es ist ein Bündel, das davon ausgeht, dass es als Top-Level-Skript im Browser geladen wird. Daher versucht es zunächst, den globalen Wert zu erstellen, indem er es einer Eigenschaft this (die es als das Fenster annimmt) zuweist, und dann versucht, auf diese globalen Werte nur als createjs zuzugreifen. Das funktioniert natürlich nicht im Modulkontext.

Es gibt eine Abhilfe, obwohl der Code für Webpack ist 2 und bezogen auf this comment (die für 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'), 
    } 
}, 

Der dritte Eintrag (resolve.alias) bildet die Einfuhr von createjs in die Datei Ich habe heruntergeladen und in meinem Ordner lib platziert (das ist nicht so elegant wie mit etwas von npm, aber jetzt bin ich mir sicher, was ich bekomme. Npm Version könnte auch funktionieren).

Der erste Eintrag (module.rules) erzählt Webpack ersten this mit window, ersetzen und dann die createjs Instanz aus dem globalen (Fenster) Kontext zu nehmen und das Modul Export machen.

Schließlich wird der zweite Eintrag (ProvidePlugin) allen Anforderungen für globale createjs (in anderen Modulen) mit vorangestellt.