在React Web App中使用createjs-soundjs [英] Using createjs-soundjs in react web app

问题描述

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

I would like to use https://www.npmjs.com/package/createjs-soundjs to play sounds on a react web app.

我通常使用npm install createjs-soundjs安装了该软件包，它显示在软件包列表中.我应该如何将其包含在我的项目中，以便可以使用它?

I installed the package normally with npm install createjs-soundjs and it's showing in the packages list. How should I include this to my project, so that I could use it?

我尝试了以下操作:

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.此错误消息非常清楚，但是我不知道从哪里开始.我缺少基本的东西吗?

The error message in console: soundjs-0.6.2.min.js:17 Uncaught ReferenceError: createjs is not defined. This error message is very clear, but I have no idea where to start. Am I missing something fundamental?

推荐答案

SoundJS核心捆绑软件的格式不正确，不是CommonJS或ES6格式，它是一个强有力的假设，将其作为浏览器中的顶级脚本加载.因此，它首先尝试通过将全局值分配给this上的属性(假定它是窗口)来创建全局值，然后尝试像createjs一样访问此全局值. 因此很明显，这在模块上下文中不起作用.

The SoundJS core bundle is not in the proper CommonJS or ES6 format, it's a bundle that makes strong assumption that it's loaded as a top-level script in the browser. So it first tries to create the global value by assigning it to a property on this (which it assumes to be the window) and then tries to access this global values as just createjs. So obviously this doesn't work in the module context.

尽管有一种解决方法，但是该代码是针对Webpack 2的，并且基于此注释(适用于Webpack 1):

There's a workaround though, the code is for Webpack 2 and based on this comment (which is for 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版本也可以使用).

The 3rd entry (resolve.alias) maps the imports of createjs to the file I've downloaded and placed into my lib folder (which is not as elegant as using something from npm, but now I'm sure what I get. npm version might work as well).

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

The first entry (module.rules) tells Webpack to first substitute this with window, and then to take the createjs instance from the global (window) context and make it the module export.

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

Finally, the 2nd entry (ProvidePlugin) precedes all requests for global createjs (in other modules) with const createjs = require('createjs').

这篇关于在React Web App中使用createjs-soundjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！