通过 npm 安装程序使用 nodejs 安装 React.js 代码后未运行

Question

我正在尝试学习 react，所以我有我的第一个 react 应用程序的示例代码，我正在尝试让它工作，但是在运行 npm install 和 npm start 之后，我收到以下错误：

C:\Users\Ak\Desktop\reactapp>npm start

> reactapp@1.0.0 start C:\Users\Ak\Desktop\reactapp
> webpack-dev-server --hot

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\Ak\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js:60:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactapp@1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactapp@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Ak\AppData\Roaming\npm-cache\_logs\2019-06-07T07_08_01_594Z-debug.log

不知道如何解决这个问题。 这是我的日志文件。

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@6.9.0
3 info using node@v10.16.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle reactapp@1.0.0~prestart: reactapp@1.0.0
6 info lifecycle reactapp@1.0.0~start: reactapp@1.0.0
7 verbose lifecycle reactapp@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle reactapp@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Ak\Desktop\reactapp\node_modules\.bin;G:\Software files\Python\Scripts\;G:\Software files\Python\;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;G:\Software files\Brackets Editor\command;C:\Program Files\nodejs\;C:\Users\Ak\AppData\Local\Programs\Python\Python36\Scripts\;C:\Users\Ak\AppData\Local\Programs\Python\Python36\;G:\Software files\Java\bin;C:\Users\Ak\AppData\Local\Microsoft\WindowsApps;G:\Software files\NMDVPN\bin;C:\Users\Ak\AppData\Roaming\npm
9 verbose lifecycle reactapp@1.0.0~start: CWD: C:\Users\Ak\Desktop\reactapp
10 silly lifecycle reactapp@1.0.0~start: Args: [ '/d /s /c', 'webpack-dev-server --hot' ]
11 silly lifecycle reactapp@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle reactapp@1.0.0~start: Failed to exec start script
13 verbose stack Error: reactapp@1.0.0 start: `webpack-dev-server --hot`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid reactapp@1.0.0
15 verbose cwd C:\Users\Ak\Desktop\reactapp
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v10.16.0
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error reactapp@1.0.0 start: `webpack-dev-server --hot`
22 error Exit status 1
23 error Failed at the reactapp@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

这是我的 package.json 文件：

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "Learning ReactJs with AK",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "keywords": [
    "npm",
    "learn",
    "react"
  ],
  "author": "AK",
  "license": "UNLICENSED",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.33.0",
    "webpack-dev-server": "^3.7.0"
  }
}

我已经通过 npm 安装程序使用 Nodejs 安装了 react。

Answer 1

错误消息的前 3 行建议做什么。

您需要安装 webpack-cli 才能运行 webpack-dev-server。如果你运行它给你的命令，你会安装 webpack-cli 作为 devDependency 并且它会全部运行。

如果您以后要大量使用 webpack，则可能值得在全局范围内安装它，而不是每次都需要添加它。

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli