使用 npm 安装反应图标的问题

Question

我正在关注 lynda.com 上的 react 教程。我正在尝试通过 npm 将反应图标安装到我的反应项目中。我在命令行中收到一些我不理解的奇怪警告。 这是教程中的结果与我的结果：

这是教程的终端结果。

这是终端中的我的结果：

Last login: Sat Aug 11 11:54:48 on ttys005
dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$ npm install --save react-icons
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/jest as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/jest
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/uglifyjs as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/uglify-js
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/html-minifier/node_modules/.bin/uglifyjs as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/html-minifier/node_modules/uglify-js
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents/node_modules/.bin/node-pre-gyp as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents/node_modules/node-pre-gyp
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/esparse as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/esprima
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/esvalidate as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/esprima
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/espree/node_modules/.bin/acorn as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/espree/node_modules/acorn
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/.bin/browserslist as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/browserslist
npm WARN rm not removing /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/autoprefixer/node_modules/.bin/browserslist as it wasn't installed by /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/autoprefixer/node_modules/browserslist
npm notice created a lockfile as package-lock.json. You should commit this file.
+ react-icons@3.0.5
added 1 package and removed 1311 packages in 10.061s
dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$

这是一个更易于查看的屏幕截图：

现在，当我尝试使用图标时，出现以下错误：

./src/Note.js
Module not found: Can't resolve 'react-icons/lib/fa/pencil' in '/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/src'

我猜这个错误与我尝试安装图标时命令行显示的内容有关。

我对 react 和 npm 还很陌生，所以我正在寻找一些关于为什么这没有按预期运行以及如何解决这个问题的指导？

更新：

我现在遇到了另一个错误：

Module build failed: Error: ENOENT: no such file or directory, open '/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/react/index.js'

我在终端中运行了npm outdated，发现了一些奇怪的结果：看起来 npm 认为 react、react-dom 和 react-script 丢失了。老实说，这有点过头了，我不知道这意味着什么，但这看起来是错误的。

dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$ npm outdated
Package        Current  Wanted  Latest  Location
react          MISSING  16.4.2  16.4.2  bulletin-board
react-dom      MISSING  16.4.2  16.4.2  bulletin-board
react-scripts  MISSING   1.1.4   1.1.4  bulletin-board

我进入了我的 package.json 文件，发现它们前面都有一个插入符号：

"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-icons": "^3.0.5"

完整的 package.json 文件内容：

{
  "name": "bulletin-board",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-icons": "^3.0.5",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

第二次更新： 我运行了每个用户 Win 的建议npm install。这改变了一些事情。

这是命令行中的结果：

dashiell-bark-husss-macbook-pro-2:bulletin-board dashiellbark-huss$ npm install
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump

> fsevents@1.2.4 install /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents
> node install

[fsevents] Success: "/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

added 1298 packages and updated 88 packages in 24.848s

现在，如果我使用语法 import { FaPencil } from 'react-icons/fa' 进行导入，我的页面会编译，但会出现以下警告：

./src/Note.js
  Line 2:  'FaPencil' is defined but never used  no-unused-vars
  Line 3:  'FaTrash' is defined but never used   no-unused-vars:

但是如果我使用语法import FaPencil from 'react-icons/lib/fa/pencil' 来导入，我的页面无法编译并且我得到这个错误：

./src/Note.js
Module not found: Can't resolve 'react-icons/lib/fa/pencil' in '/Users/dashiellbark-huss/Downloads/Ex_Files_Learning_Reactjs/Exercise Files/Ch03/03_02/start/bulletin-board/src'

更新 3： 修复语法错误后，我现在得到一个不同的错误

'react-icons/fa' does not contain an export named 'FaPencil'.

npm 版本 5.6.0

Answer 1

您正在尝试访问付费图标。您必须使用免费的铅笔图标：

import { FaPencilAlt } from 'react-icons/fa';

然后像这样使用它

<FaPencilAlt/>

您可以在此处找到可以使用的图标列表：https://fontawesome.com/icons?d=gallery&q=Pencil

任何标记为 PRO 的内容都将不可用。