使用npm

Question

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

这是终端的教程结果。

这是终端机上的我结果：

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'

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

我对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"
  }
}

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

这是命令行中的结果：

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的内容将不可用。