使用react-app-rewired将webpack配置添加到react-create-app

Question

警告:我是新手。

我正在开发一个通过yarn使用react-create-app的react应用程序。

我正在尝试使用这些指令https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls安装react-wavesurfer

我需要以某种方式将Wavesurfer.js添加到应用程序中。这些说明包括对webpack的配置进行更改，我正在努力避免弹出。

我找到了react-app-rewired和这篇文章https://jaketrent.com/post/change-webpack-config-create-react-app-without-ejecting/

因此，我将其添加到config-overrides.js中

const rewireProvidePlugin = require('react-app-rewire-provide-plugin')

// Use `webpack.ProvidePlugin` to add jQuery globally


module.exports = function override(config, env) {
  // add a plugin
  config = rewireProvidePlugin(config, env, {
    'WaveSurfer': 'wavesurfer.js',
  })

    resolve: {
        alias: {
            wavesurfer: require.resolve('wavesurfer.js')
        }
    }

  return config
}

，但是我仍然不能访问包含这些导入的页面中的wavesurfer

import React, {Component} from 'react'
import history from '../../../history'
import Wavesurfer from 'react-wavesurfer'

import * as _ from 'lodash'

require('wavesurfer.js')
require('wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js')
require('wavesurfer.js/dist/plugin/wavesurfer.regions.min.js')
require('wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js')

当我尝试运行react-app-rewired start时

有什么关于如何解决这个问题的线索吗？

Answer 1

改用npm版本，在package.json文件的依赖项下添加wavesurfer，然后执行npm install，或者如果您使用的是yarn，则执行yarn install

如何在项目内部使用。

import WaveSurfer from 'wavesurfer.js';