将第三方 javascript 库导入 react答案

【问题标题】：Import third-party javascript libs into react将第三方 javascript 库导入 react
【发布时间】：2018-04-30 10:59:28
【问题描述】：

我使用 create-react-app 创建了我的 react 应用程序。对于我的应用，我需要pace-progress、perfect-scrollbar等，还有第三方库。
我尝试在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”

pace-progress的结构如下：

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

【问题讨论】：

我建议你改用这个包npmjs.com/package/react-pace-progress。

标签： reactjs webpack create-react-app

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是pace模块定义的问题

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

（这将pace定义为依赖项，npm上的pace是本项目不依赖的无关CLI进度条包。）

您可以在this issue on pace repo 中阅读更多相关信息

不幸的是，正因为如此，解决方案并不漂亮。

解决这个问题的一种方法是更改 webpack 配置以添加它

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

这需要弹出创建反应应用程序。我建议不要这样做。我的建议是使用不同的库来显示进度条。如果您需要更多组件，您可以使用react-progressbar.js、react-component/progress 或使用 UI 框架UI frameworks for react

【讨论】：