“一饮而尽”返回ReferenceError:原语未定义

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软件包时，我发现了一堆错误，我不太确定如何解决。还有..。我尝试使用node的版本12和版本10。我无法安装/执行'yo‘。唯一能让你工作的方法就是使用节点14。

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

编辑1

我不小心有事情要做。我读到了关于吞咽的文章，试着用“吞咽”代替“吞咽发球”。这就是我得到的：

    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

而现在..。狼吞虎咽的服务也有效。

我不明白为什么。有人能解释一下吗？

Answer 1

节点14在SPFx v1.12.1中工作得很好。看上去你在macOS…上这些错误表明您没有安装XCode，特别是命令行工具(ref：“gyp: No Xcode或CLT版本检测到了！”)。关于这一点的短篇小说:它们包括一些软件包…使用的编译器当您安装NPM软件包时，有些需要在安装后进行编译。他们会自动这样做，所以对你来说是透明的，但是工具需要在那里。如果你搜索这个错误，你会发现很多关于如何修复它的信息，比如：https://medium.com/@mrjohnkilonzi/how-to-resolve-no-xcode-or-clt-version-detected-d0cf2b10a750

为什么它第二次工作，而不是第一次…err…无法解释那部分。也许第一次构建失败了，但是第二次尝试成功了。在不指定要运行的任务的情况下运行gulp时，它将使用默认任务。我认为这是build任务…但是gulp serve不管如何运行build任务。

我仍然会修复缺少的XCode CLI工具，继续前进…。这不仅仅是一件SPFx的事情，而且你将来使用的任何东西都依赖于需要它的NPM包。

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

Answer 2

您需要安装gulp的正确版本，该版本已更新为npm版本。要更新国家预防机制运行情况：

npm install

然后指定gulp版本，例如：

npm install gulp@^4.0.2