logo标签列表

运行npm run dev脚本时出现错误

javascriptnode.jsnpmwebpack
10

我正在尝试跟随教程，但是遇到了一个与脚本有关的错误。

我已经重新开始教程，以确保没有错过任何内容，但是我遇到了同样的障碍。我在Mac上使用PyCharm。

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

test.js

console.log('imported module');

export default

索引.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 ]

以下是我文件结构的片段，我认为问题就在这里。 文件结构

webpack 是全局安装还是本地安装的？Node 找不到 'webpack'。 - Robert Rowntree
根据他的 package.json @RobertRowntree 它是本地的。他可能有全局和本地的，尝试删除你拥有的所有 webpack 实例。 - PlayMa256
我刚刚移除了本地和全局版本，尝试使用 npm install webpack --save-dev 命令。现在当我尝试运行 npm run dev 时，出现了 sh: webpack: command not found 的错误提示，同时也伴随着 npm ERR! Failed at the forkify@1.0.0 dev script. 的错误提示。 - Cflux
3个回答
8
我和一个朋友解决了这个问题。奇怪的是，我不得不使用命令：npm link webpack从全局依赖中链接它。一旦成功，我取消链接然后运行npm install webpack --save-dev，然后它开始工作了。我不知道为什么在我最初安装它时它没有从本地依赖项中找到它。
感谢大家的帮助。
更新：
同样的事情也发生在npm install webpack-dev-server --save-dev上。
我认为这可能与我可能不是管理员有关。每次我需要安装时都必须输入sudo，我以为只有当我不是管理员时才需要这样做。请随意告诉我相关信息。
2
我也在跟着同样的教程学习，遇到了同样的问题。
我尝试了以上所有解决方案，但都没有用。
我还按照 Jonas 在“笔记第133讲”中所说的，使用了新的更新命令行，但在他关于webpack的“134讲”之前，这也没有起作用：
npm install --save-dev webpack@4 webpack-cli@2 webpack-dev-server@3
所以，下面是我如何使 npm run dev 正常工作的方法：
如果你仔细观察了“第134和135讲”，Jonas 使用的是 webpack 4.2.0，webpack-cli 2.0.12，并且没有安装任何webpack-dev-server。
如果你之前安装了webpack，请执行以下操作：
在终端中，cd 到你安装webpack的 "9-forkify" 文件夹的目录，并运行以下命令卸载 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
现在应该可以在chrome网络浏览器上控制台中无错误地正常运行 npm run dev。
对于任何好奇的人，我们正在谈论哪个教程：
"The Complete JavaScript Course 2020: Build Real Projects!" 链接在这里：https://www.udemy.com/course/the-complete-javascript-course/
在我的情况下，只是webpack配置文件中的一个打字错误。现在可以正常运行，无需降级软件包版本。 - Devender Kumar
0

编辑：由于某些原因，我的答案被投票否决了，但它确实有效。不妨试一试。

我认为问题在于您正在尝试使用webpack，但它未全局安装。 您应该可以通过使用npx（一个与npm一起安装的工具）来执行本地安装的软件包来解决此问题。

在您的package.json中，尝试更改：

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

转换为这个： 

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

如果这解决了你的问题，请告诉我！

他的依赖项中有Webpack，通过运行它将调用本地Webpack。无需使用npx全局运行。 - PlayMa256
@MatheusSilva npx 运行本地包，而不是全局包。你误解了我的回答，它完美地运行。 - Defacto
好的，我尝试了npx的方式，但不幸的是它并没有起作用。然后它要求我安装webpack-cli或webpack-command，但我已经安装了webpack-cli。无论如何，我选择了webpack-cli，然后出现了一个错误，显示：{ Error: Cannot find module 'webpack-cli' at Function.Module._resolveFilename (module.js:547:15) - Cflux
首先，请确保已安装 webpack：npm install --save-dev webpack。如果您正在使用 webpack v4 或更高版本，则还需要安装 CLI：npm install --save-dev webpack-cli。然后，在您的 package.json 文件中，将启动脚本更改为以下内容："start": "webpack --config webpack.config.js"，其中 webpack.config.js 是您项目的 webpack 配置文件。如果这解决了您的问题，请告诉我。 - Defacto
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接