我正在尝试使用以下方法在 nuxt 项目上使用 vscode 设置调试:
https://medium.com/@justin.ramel/nuxt-js-debugging-in-visual-studio-code-822ff9d51c77
我已经做到了:
$ npm run dev-debug
> [email protected] dev-debug E:\ENVS\js\nuxt4
> node --inspect node_modules/.bin/nuxt
Debugger listening on ws://127.0.0.1:9229/6f869cb6-7166-4182-b841-a528917d88fd
For help, see: https://nodejs.org/en/docs/inspector
E:\ENVS\js\nuxt4\node_modules\.bin\nuxt:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at new Script (vm.js:83:7)
at createScript (vm.js:267:10)
at Object.runInThisContext (vm.js:319:10)
at Module._compile (internal/modules/cjs/loader.js:684:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
at executeUserCode (internal/bootstrap/node.js:342:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev-debug: `node --inspect node_modules/.bin/nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev-debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
整个nuxt文件是:
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
else
node "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
fi
exit $ret
编辑:
我尝试进行更改并得到:
> node --inspect node_modules/.bin/nuxt
Debugger listening on ws://127.0.0.1:9229/458bafd6-1d8c-4a2b-8ec2-5ddc8b4f0fda
For help, see: https://nodejs.org/en/docs/inspector
E:\ENVS\js\nuxt4\node_modules\.bin\nuxt:1
(function (exports, require, module, __filename, __dirname) { #!/bin/sh
^
SyntaxError: Invalid or unexpected token
at new Script (vm.js:83:7)
at createScript (vm.js:267:10)
at Object.runInThisContext (vm.js:319:10)
at Module._compile (internal/modules/cjs/loader.js:684:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
at executeUserCode (internal/bootstrap/node.js:342:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev-debug: `node --inspect node_modules/.bin/nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev-debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
如何让这个工作?
我有一个部分的解释和一个应该对某些人有用的修复程序。
问题的根本原因是
node
得到了一个Bash或Windows shell脚本作为参数。如果你查看 .bin
中的文件,例如 node_modules\.bin\nuxt
,你会发现这些实际上是 shell 脚本,它们应该返回 JavaScript 文件的真实路径,该文件应该作为参数传递给 node
.
我什至不知道这在 Linux 下应该如何工作,但我在使用
git-bash
时遇到过这个问题,而在 Linux VM 上使用相同的代码库工作得很好,所以它绝对是特定于环境的。如果有人对此有答案,我很乐意将其添加到问题中。
请勿将
.bin
中的文件传递给node
。而是找到真实文件的路径并将其传递。在这种情况下,它是 node_modules/nuxt/bin/nuxt.js
并且许多库遵循相同的原则,但有时可能会有点棘手,例如 Angular
在我的系统上的 node_modules/@angular/cli/bin/ng
中。
此解决方案绕过了
JavaScript
文件的定位方式,并且可能会在库更新后停止工作。或者它可能不适用于所有系统。我不是 node
开发人员,只是在尝试运行其他人的代码时才发现它。对于我的用例来说,这是一个足够好的解决方案,但可能对您不利。
就我而言,我在 package.json 中使用了错误的路径:
我这样的时候没用:
"scripts": {
...
"dev-debug": "node --inspect node_modules/.bind/nuxt,
...
}
但是当我更改为正确的路径时它确实起作用了:
"dev-debug": "node --inspect node_modules/nuxt/bin/nuxt.js",
像这样工作
"dev-debug": "node --inspect node_modules/nuxt/bin/nuxt.js",
我使用这种方法的原因是因为 Nuxt 的这个公开问题#8730。 VsCode 本机调试器(在 Nuxt 服务器端/静态生成器 || 通用应用程序上)未使用源映射。
如果你的 Nuxt App 是一个 SPA,没问题。
我在 package.json 文件中使用以下配置
"scripts": {
"test": "node --inspect node_modules/.bin/cross-env API_HOST=url ember serve",
}
以上配置适用于 Linux 机器。但是我有一台 Windows 机器,在 npm run test 期间我得到了这个错误。
在我的情况下,当我删除 node --inspect 而不是它对我的工作时。
"test": "node_modules/.bin/cross-env API_HOST=url ember serve",
我不确定这是否是问题所在,但还是试试这个。就像我过去在使用遗留反引号时遇到了一些奇怪的错误``.
使用 $(...) 符号而不是传统的反引号 `...`
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case $(uname) in
*CYGWIN*) basedir=$(cygpath -w "$basedir");;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
else
node "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
fi
exit $ret
我在修复时也遇到了这个问题,以便我们的反应项目可以运行两个不同的 tsconfig 文件。请注意,“原始”在本地工作但在我们的天蓝色管道中失败。 “修复”和“原始”都在本地和我们的管道中工作。
错误:
> [email protected] automation
> ts-node --project src/tests/tsconfig.commonjs.json ./node_modules/.bin/cucumber-js src/tests/features/**/*.feature --require-module ts-node/register --require src/tests/test.setup.ts --require src/tests/step-definitions/**/*.spec.ts
D:\a\1\s\client-app\node_modules\.bin\cucumber-js:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Object.require.extensions.<computed> [as .js] (D:\a\1\s\client-app\node_modules\ts-node\src\index.ts:1608:43)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Function.Module._load (node:internal/modules/cjs/loader:958:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at phase4 (D:\a\1\s\client-app\node_modules\ts-node\src\bin.ts:649:14)
at bootstrap (D:\a\1\s\client-app\node_modules\ts-node\src\bin.ts:95:10)
##[error]Cmd.exe exited with code '1'.
原始节点脚本(npm run automation):
"automation": "ts-node --project src/tests/tsconfig.commonjs.json ./node_modules/.bin/cucumber-js src/tests/features/**/*.feature --require-module ts-node/register --require src/tests/test.setup.ts --require src/tests/step-definitions/**/*.spec.ts",
修复:
"automation": "ts-node --project src/tests/tsconfig.commonjs.json ./node_modules/@cucumber/cucumber/bin/cucumber.js src/tests/features/**/*.feature --require-module ts-node/register --require src/tests/test.setup.ts --require src/tests/step-definitions/**/*.spec.ts",
就像其他人提到的那样。这是设置包文件的正确路径的问题。黄瓜是我的问题。