首页 > 解决方案 > React、webpack 和 Wavesurfer.js

问题描述

我正在尝试使用 npmreact-wavesurfer包,但得到错误

this._wavesurfer.init is not a function

这似乎是因为 wavesurfer 设置不正确。github 上的“先决条件和常见陷阱”页面指出“WaveSurfer 需要是一个全局可访问的变量”。

// provide WaveSurfer as a globally accessible variable
  plugins: [
    new webpack.ProvidePlugin({
      WaveSurfer: 'wavesurfer.js'
    })
  ],
  // Alias `wavesurfer` to the correct wavesurfer package.
  // (wavesurfer.js has some non-standard naming convention)
  resolve: {
    alias: {
      wavesurfer: require.resolve('wavesurfer.js')
    }
  },

我的 react 项目是用创建的,create-react-app所以我没有 webpack 配置文件。 如何包含这些 wavesurfer 插件?

注意: 这个问题问的是同样的事情,但唯一的答案是直接使用非反应wavesurfer.js包。我宁愿使用react-wavesurfer.

标签: javascriptreactjswebpackcreate-react-appwavesurfer.js

解决方案


推荐阅读