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

【问题标题】：Adding webpack config to react-create-app using react-app-rewired使用 react-app-rewired 将 webpack 配置添加到 react-create-app
【发布时间】：2018-01-10 22:23:06
【问题描述】：

警告：我是新手。

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

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

我需要以某种方式让 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 时

关于如何解决这个问题的任何线索？

【问题讨论】：

标签： javascript reactjs webpack yarnpkg wavesurfer.js

【解决方案1】：

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

如何在项目内部使用。

import WaveSurfer from 'wavesurfer.js';

【讨论】：