在 React Web 应用程序中使用 createjs-soundjs

IT技术 javascript reactjs npm soundjs
2021-05-25 18:47:39

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

1个回答

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

不过有一个解决方法,代码适用于 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'),
  }
},

第三个条目 (resolve.alias) 将 的导入映射createjs到我下载并放入我的lib文件夹中的文件(这不像使用 npm 中的东西那么优雅,但现在我确定我得到了什么。npm 版本可能有效同样)。

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

最后,第二个条目 (ProvidePlugin createjs) 以const createjs = require('createjs').