사용 createjs-soundjs 내가 반응하는 웹 응용 프로그램에서 사운드를 재생하기 위해 <a href="https://www.npmjs.com/package/createjs-soundjs" rel="nofollow">https://www.npmjs.com/package/createjs-soundjs</a>을 사용하고자하는 웹 응용 프로그램

Question

반응.

나는 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 catch되지 않은 ReferenceError가 : createjs은 정의되지 않은

나는 다음과 같은 노력했다. 이 오류 메시지는 매우 명확하지만 어디서부터 시작해야할지 모르겠습니다. 나는 근본적으로 뭔가 빠져 있니?

Answer 1

SounJS 번들은 그것이 브라우저에서 최상위 스크립트로 장전 강한 가정을 만드는 번들의 적절한 CommonJS 또는 ES6의 형식이 아닙니다. 그래서 먼저 (이 창을 것으로 가정되는) this에 속성에 할당하여 글로벌 가치를 만들려고하고 단지 createjs으로이 글로벌 값에 액세스하려고합니다. 분명히 이것은 모듈 컨텍스트에서 작동하지 않습니다.

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

제 3 항목 (resolve.alias) 파일에 createjs의 수입을 매핑합니다

대안으로하지만, 코드 (웹팩 1 인) this comment을 기반으로 웹팩 2이고있다 나는 다운로드하여 내 lib 폴더에 배치했다. (npm에서 사용하는 것만 큼 우아하지는 않지만 지금은 내가 얻은 것이 확실하다 .npm 버전도 잘 동작 할 것이다).

첫 번째 항목 (module.rules)

는 웹팩가 먼저 전역 (창) 컨텍스트에서 createjs 인스턴스를 가지고 가고 모듈 수출하기 위해 다음 window와 this을 대체하고 알려줍니다.

마지막으로 두 번째 항목 (ProvidePlugin)은 createjs (다른 모듈에서)에 대한 모든 요청 앞에 const createjs = require('createjs')이옵니다.