“gulp serve”返回“ReferenceError：primordials 未定义”

Question

今天是 SPFx、Gulp 和 Yo 等的第一天。

尝试教程，但它因以下错误而崩溃：

mini-3:helloworld-webpart admin$ gulp serve
ReferenceError: primordials is not defined
    at fs.js:45:5
    at req_ (/playground/spfx/helloworld-webpart/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/playground/spfx/helloworld-webpart/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/playground/spfx/helloworld-webpart/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/playground/spfx/helloworld-webpart/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:3:27)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
About to exit with code: 1
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1

以下是我目前采取的所有步骤：

https://pastebin.com/DC6XbPpq

正如您所见，当我尝试安装 npm 软件包时，我遇到了一堆错误，我不太确定如何解决。 另外...我尝试使用节点的版本 12 和版本 10。我无法安装/执行“哟”。我能让你工作的唯一方法是使用节点 14。

任何建议都会有所帮助。我对节点、SPFx 和 npm 非常陌生。如果我错过了一些简单的事情，我会提前道歉。

编辑 1

我不小心把事情弄好了。我正在阅读有关 gulp 的信息，并尝试运行“gulp”而不是“gulp serve”。这是我得到的：

    mini-3:hello-new-world admin$ gulp
    Build target: DEBUG
    [14:31:45] Using gulpfile /playground/spfx/hello-new-world/gulpfile.js
    [14:31:45] Starting 'default'...
    [14:31:45] Starting gulp
    [14:31:45] Starting subtask 'configure-sp-build-rig'...
    [14:31:45] Finished subtask 'configure-sp-build-rig' after 2.53 ms
    [14:31:45] Starting subtask 'pre-copy'...
    [14:31:45] Finished subtask 'pre-copy' after 48 ms
    [14:31:45] Starting subtask 'copy-static-assets'...
    [14:31:45] Starting subtask 'sass'...
    [14:31:45] Finished subtask 'copy-static-assets' after 23 ms
    [14:31:45] Finished subtask 'sass' after 112 ms
    [14:31:45] Starting subtask 'tslint'...
    [14:31:45] [tslint] tslint version: 5.12.1
    [14:31:45] Starting subtask 'tsc'...
    [14:31:45] [tsc] typescript version: 3.7.7
    [14:31:47] Finished subtask 'tsc' after 1.74 s
    [14:31:47] Finished subtask 'tslint' after 2.3 s
    [14:31:47] Starting subtask 'post-copy'...
    [14:31:47] Finished subtask 'post-copy' after 105 μs
    [14:31:47] Starting subtask 'configure-webpack'...
    [14:31:47] Finished subtask 'configure-webpack' after 229 ms
    [14:31:47] Starting subtask 'webpack'...
    [14:31:48] Finished subtask 'webpack' after 673 ms
    [14:31:48] Finished 'default' after 3.38 s
    [14:31:49] ==================[ Finished ]==================
    [14:31:49] Project hello-new-world version:0.0.1
    [14:31:49] Build tools version:3.17.11
    [14:31:49] Node version:v14.17.3
    [14:31:49] Total duration:6.16 s

现在...... gulp serve 也可以了。

我不明白为什么。谁能解释一下？

Answer 1

节点 14 可与 SPFx v1.12.1 配合使用。看起来您使用的是 macOS……错误表明您没有安装 XCode，特别是命令行工具（ref:“gyp: No Xcode or CLT version detected!”）。简短的故事：它们包括一些包使用的一些编译器......当你安装 NPM 包时，有些需要在安装后编译。他们会自动执行此操作，因此对您来说是透明的，但工具需要在那里。如果你用谷歌搜索这个错误，你会发现很多关于如何修复它的信息，比如：https://medium.com/@mrjohnkilonzi/how-to-resolve-no-xcode-or-clt-version-detected-d0cf2b10a750

为什么它第二次起作用但第一次不起作用……呃……无法解释那部分。第一次构建失败可能更多，但第二次尝试成功了。在不指定要运行的任务的情况下运行gulp 时，它使用默认任务。我认为这是 build 任务……但gulp serve 无论如何都会运行 build 任务。

我仍然会修复缺少的 XCode CLI 工具……这不仅仅是 SPFx 的东西，而是你将来使用的任何依赖于 NPM 包的东西。

顺便说一句，将来如果您说出您使用的 SPFx 版本会有所帮助。在这种情况下，您可以从 pastebin 中推断出它是 v1.12.1，但这是关键的第一个问题。