npm运行dev脚本错误

Question

我正在尝试遵循教程，并且我继续遇到与脚本有关的错误。

我重新启动了教程，试图确保我没有错过任何东西，但是我遇到了同样的障碍。我在pycharm的mac上。

到目前为止，在教程（它的udemy）中，我们安装了webpack-cli，webpack，并创建了一个test.js文件，以查看导入和导出模块是否有效。

test.js

console.log('imported module');

export default

Index.js

// Global app controller

import num from './test';

console.log(`I imported ${num} from another module`);

的package.json

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.2"
  },
  "scripts": {
    "dev": "webpack"
  },
  "author": "Christopher Maltez",
  "license": "ISC"
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
      path: path.resolve(__dirname,'dist/js'),
      filename: 'bundle.js'
    },
    mode: 'development'
};

这是错误日志。

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using npm@6.1.0
3 info using node@v8.11.2
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle forkify@1.0.0~predev: forkify@1.0.0
6 info lifecycle forkify@1.0.0~dev: forkify@1.0.0
7 verbose lifecycle forkify@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle forkify@1.0.0~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Users/chrismaltez/anaconda3/bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Users/chrismaltez/anaconda3/bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/mysql/bin/:/usr/local/mysql/bin/
9 verbose lifecycle forkify@1.0.0~dev: CWD: /Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter
10 silly lifecycle forkify@1.0.0~dev: Args: [ '-c', 'webpack' ]
11 info lifecycle forkify@1.0.0~dev: Failed to exec dev script
12 verbose stack Error: forkify@1.0.0 dev: `webpack`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at emitTwo (events.js:126:13)
12 verbose stack     at ChildProcess.emit (events.js:214:7)
12 verbose stack     at maybeClose (internal/child_process.js:925:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
13 verbose pkgid forkify@1.0.0
14 verbose cwd /Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter
15 verbose Darwin 17.5.0
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
17 verbose node v8.11.2
18 verbose npm  v6.1.0
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error forkify@1.0.0 dev: `webpack`
23 error spawn ENOENT
24 error Failed at the forkify@1.0.0 dev script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

这是我的文件结构的片段，我认为是问题所在。

Answer 1

一位朋友和我弄清楚了。奇怪的是，我不得不使用命令：npm link webpack将它从全局依赖项中链接起来。一旦工作，我取消链接，然后运行npm install webpack --save-dev，然后开始工作。我不知道为什么它从我最初安装它时从本地依赖中找不到它。

谢谢大家的帮助。

<强> 更新

同样的事情发生在：npm install webpack-dev-server --save-dev

我认为这可能与我有关，可能不是管理员。每次我必须安装我必须输入sudo我以为我只需要这样做，如果我不是管理员。随意开导我。

Answer 2

我也在遵循相同的教程，并且遇到了相同的问题。

我尝试了上述所有解决方案，但没有任何效果。

我还尝试了乔纳斯在“ Note演讲133”上说的话，以使用新的更新的命令行，在他关于Webpack的“第134讲”之前，该命令行也不起作用：

npm install --save-dev webpack@4 webpack-cli@2 webpack-dev-server@3

所以，这就是我npm run dev工作的方式：

如果您仔细地观看了“第134和135号讲课”，乔纳斯正在使用webpack 4.2.0，webpack-cli 2.0.12，也没有安装任何webpack-dev-server。

如果您以前安装过webpack，请执行以下操作：

在终端上，cd到安装webpack的“ 9-forrkify”文件夹的目录，并运行以下命令来卸载webpack：

npm uninstall webpack-dev-server --save

npm uninstall webpack-cli --save

npm uninstall webpack --save

要正确安装webpack以遵循本教程，请运行以下命令：

npm install --save-dev webpack@4.2.0 webpack-cli@2.0.12 webpack-dev-server@3.1.1

npm run dev现在应该可以正常运行，并且在chrome网络浏览器的控制台上没有错误。

对于那些好奇我们都在谈论什么教程的人：

“ 2020年完整JavaScript课程：构建实际项目！” 这是链接：https://www.udemy.com/course/the-complete-javascript-course/

Answer 3

编辑：出于某种原因，我的答案被低估了，但它确实有效。试一试。

我认为问题在于您尝试使用webpack，但未在全球范围内安装。您应该能够使用npx（与npm一起安装的工具）来执行本地安装的软件包来解决此问题。

在package.json中，尝试更改：

"scripts": {
    "dev": "webpack"
 }

对此：

"scripts": {
    "dev": "npx webpack"
}

请告诉我这是否解决了您的问题！