レスキューウェブアプリでcreatejs-soundjsを使用

Question

https://www.npmjs.com/package/createjs-soundjsを使用して、反応するウェブアプリでサウンドを再生したいと考えています。

パッケージは通常npm install createjs-soundjsでインストールされており、パッケージリストに表示されています。これを私のプロジェクトにどのように入れて、それを使うことができるのですか？

Iは、以下を試してみました：

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キャッチされないにReferenceError：createjsが定義されていません。このエラーメッセージは非常にはっきりしていますが、どこから始めたらいいか分かりません。私は何か基本的なことを逃しています

Answer 1

SounJSバンドルは、適切なCommonJSまたはES6形式ではありません。これは、ブラウザにトップレベルのスクリプトとしてロードされていることを強く前提としたバンドルです。そのため、まずグローバル値をthis（これはウィンドウとみなされます）のプロパティに代入して作成し、このグローバル値にちょうどcreatejsとしてアクセスしようとします。 明らかに、これはモジュールコンテキストでは機能しません。

回避策はありますけれども、コードはWebPACKの2のためのものであり、（WebPACKの1のためである）this commentに基づく：

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'), 
    } 
}, 

第三のエントリ（resolve.alias）は、ファイルにcreatejsの輸入をマップします私はダウンロードして私のlibフォルダに入れました（これはnpmから何かを使用するほど優雅ではありませんが、今は私が得たものです。npmバージョンも同様に動作します）。

最初のエントリ（module.rules）が最初windowとthisを置換すること、および、グローバル（ウィンドウ）コンテキストからcreatejsインスタンスを取得し、そのモジュールのエクスポートするためにWebPACKのに指示します。

最後に、2番目のエントリ（ProvidePlugin）は、createjs（他のモジュールでは）のすべての要求よりも前にconst createjs = require('createjs')のすべての要求に先行します。