导入第三方javascript库到react

Question

我使用create-react-app创建了我的react 应用 。 对于我的应用程序，我需要进度，完美滚动条等，还有第三方库。
我试图将pace-progress index.js文件中的index.js pace-progress导入如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'pace-progress';
import App from './App/AppContainer.bs';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

编译器抱怨：

./node_modules/pace-progress/pace.js

找不到模块：无法在“ / home / developer / Desktop / react-reason / cockpit / node_modules / pace-progress”中解析“ pace”

进度的结构如下：

如您所见，没有默认的index.js文件。 如何导入文件？

Answer 1

我设法通过运行npm install progress --save解决了这个问题

即。 将速度明确安装到node_modules文件夹的根目录中

Answer 2

您始终可以将这些库加载到根HTML文件（如index.html ，然后在应用程序中重复使用。 您应该单独加载应用程序，并从window范围访问第三方库。

Answer 3

这是步速模块定义的问题

define(['pace'], function() {
  return Pace;
});

（这将进度定义为依赖项，而对npm的进度则是该项目不依赖的无关的CLI进度栏程序包。）

您可以在步速仓库中阅读有关此问题的更多信息

不幸的是，因此，解决方案并不理想。

解决此问题的一种方法是更改​​webpack配置以添加此配置

module: {
    rules: [
        { 
            test: require.resolve("pace-progress"), 
            loader: "imports-loader?define=>false"
        }
    ]
}

这需要弹出创建反应应用程序。 我建议不要这样做。 我的建议是去一个其他的图书馆去展示进度条。 您可以使用react-progressbar.js ， react-component / progress或使用UI框架（如果您需要更多组件UI框架来进行反应）