如何添加依赖以做出反应？

Question

我正在尝试将以下库添加到 React 项目中：

https://github.com/rndme/download

我做了以下事情：

yarn add https://github.com/rndme/download

并得到了这样的回应：

info No lockfile found.
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
[4/4]   Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ downloadjs@1.4.8
info All dependencies
└─ downloadjs@1.4.8
✨  Done in 2.19s.

然后我更新了 package.json 以包含它：

  "dependencies": {
    "bootstrap": "4.1.3",
    "react": "^16.6.0",
    "react-cookie": "3.0.4",
    "react-dom": "^16.6.0",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.1.0",
    "reactstrap": "6.5.0",
    "downloadjs": "1.4.8"
  },

并添加了一些代码来调用它：

  async downloadFile(file, url) {
    const res = await fetch(url);
    const blob = res.blob();

    // from downloadjs it will download your file
    download(blob, file, "text/plain");  
  }

但是，它没有编译：

Failed to compile
./src/LicenseList.js
  Line 64:  'download' is not defined  no-undef

知道为什么吗？

Answer 1

当您运行 yarn add <dependency> 时，您所需的依赖项实际上已添加到 package.json 中，然后被下载到 node_modules 文件夹中。在这种情况下，您不必手动更新 package.json。您是否在项目的根文件夹中执行了 yarn add？这是必不可少的。缺少锁定文件表示您是第一次在此文件夹中执行 yarn install 或 yarn add。锁定文件通常会添加到 Git 存储库中，因此您似乎运行在错误的路径下执行该命令。

关于编译错误：运行宁yarn add后，您需要在代码中导入所需的function/module。然后，您可以使用该功能。看来您没有正确导入模块。您需要在 JavaScript 文件顶部添加一条语句 import downloadjs from 'downloadjs'。

因此，这些是您在添加新依赖项时需要遵循的步骤：

转到项目根目录并运行 yarn add <dependency>，在本例中为 yarn add downloadjs。您通常可以在 Git 存储库中项目的 package.json 文件中找到依赖项的确切名称。您可以检查一下 ./node_modules/downloadjs 中是否存在包含所需内容的文件夹以及 package.json 和锁定文件中对该包的引用。
根据您的模块捆绑器，您需要导入现在安装的依赖项。使用 require.js，您将添加如下语句：
```
const downloadjs = require('downloadjs');
```
通常，您会像这样导入它：
```
import downloadjs from 'downloadjs';
```
然后，你将导入的模块保存在变量downloadjs中。然后您可以像文档中描述的那样使用该模块。在这种情况下，它将是：
```
downloadjs(data, strFileName, strMimeType);
```

Answer 2

如果你使用的是 yarn，你只需要写 yarn add mydepencyname 或 yarn add -D mydependencyname 来添加一个 devDependency（也就是说 "only useful during the development phase".

您将在 npm.com 上找到正确的依赖项名称。要更新您的依赖项，只需键入 yarn upgrade-interactive --latest，然后按空格键 select 您要更新的包。

Answer 3

我访问了这个包的 Repo，它说如下：

Simple global download function via <script> include download(data, strFileName, strMimeType);

所以你需要包含一个脚本标签并引用node_modules下的路径到这个包才能使用这个。类似的东西 <script src="/node_modules/downloadjs" /> 然后全局下载功能将可用于您的代码...让我知道是否有意义... Repo中描述了另一种方法 require("downloadjs")(data, strFileName, strMimeType);

如何添加依赖以做出反应？

How to add a dependency to react?

javascript

reactjs

yarnpkg