Question

我想使用https://www.npmjs.com/package/createjs-soundjs在反应式网络应用上播放声音。

我通常使用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未捕获的ReferenceError：未定义createjs。此错误消息非常清楚，但我不知道从哪里开始。我错过了一些基本的东西吗？

Answer 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')（在其他模块中）的所有请求之前。

在反应网络应用中使用createjs-soundjs

1 个答案: