在反应网络应用程序中使用 createjs-soundjs答案

【问题标题】：Using createjs-soundjs in react web app在反应网络应用程序中使用 createjs-soundjs
【发布时间】：2018-12-03 20:01:28
【问题描述】：

我想使用 https://www.npmjs.com/package/createjs-soundjs 在 React Web 应用程序上播放声音。

我使用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 is not defined。这个错误信息很清楚，但我不知道从哪里开始。我错过了一些基本的东西吗？

【问题讨论】：

最终使用了不同的包npmjs.com/package/soundmanager2，它提供了非常愉快的开发者体验。但是，我仍然想知道 soundJS 有什么问题。

标签： javascript reactjs npm soundjs

【解决方案1】：

SoundJS 核心包不是正确的 CommonJS 或 ES6 格式，它是一个强烈假设它作为浏览器中的顶级脚本加载的包。因此，它首先尝试通过将全局值分配给this（它假定为窗口）上的属性来创建全局值，然后尝试以createjs 的形式访问该全局值。所以显然这在模块上下文中不起作用。

不过有一个解决方法，代码适用于 Webpack 2，基于 this comment（适用于 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'),
  }
},

第三个条目 (resolve.alias) 将 createjs 的导入映射到我下载并放入我的 lib 文件夹中的文件（这不像使用来自 npm 的东西那么优雅，但现在我确定我得到了什么。npm 版本也可以工作）。

第一个条目 (module.rules) 告诉 Webpack 首先将 this 替换为 window，然后从全局（窗口）上下文中获取 createjs 实例并将其作为模块导出。

最后，第二个条目（ProvidePlugin）在所有对全局createjs（在其他模块中）的请求之前都带有const createjs = require('createjs')。

【讨论】：