今天是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。
任何建议都会很有帮助。我对node、SPFx和npm非常陌生。如果我错过了一些简单的事情,我会提前道歉。
编辑1
我不小心把东西弄好了。我读了很多关于gullow的文章,试着只运行"gullow"而不是"gullow-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
现在。。。大口发球也有效。
我不明白为什么。有人能解释一下吗?
节点14与SPFx v1.12.1配合良好。看起来你在macOS上…错误表明你没有安装XCode,特别是命令行工具(ref:"gyp:未检测到XCode或CLT版本!">(。简短介绍:它们包括一些程序包使用的一些编译器……当你安装NPM程序包时,有些程序包需要在安装后进行编译。他们会自动完成,所以对你来说是透明的,但工具需要在那里。如果你用谷歌搜索这个错误,你会发现很多关于如何修复它的点击,比如:https://medium.com/@mrjohnkilonzi/如何解决-无xcode-or-clt-version检测-d0cf2b10a750
为什么第二次有效但第一次无效…呃…无法解释这一部分。也许第一次构建失败了,但第二次尝试成功了。在不指定要运行的任务的情况下运行gulp
时,它将使用默认任务。我认为这是构建任务……但gulp serve
无论如何都会运行生成的任务。
我仍然会修复丢失的XCode CLI工具……这不仅仅是SPFx的事情,而是你将来使用的任何依赖于需要它的NPM包的东西。
BTW,在未来,如果你说你正在使用什么版本的SPFx,这会有所帮助。在这种情况下,您可以从pastebin中推断出它是v1.12.1,但这是关键的第一个问题
您需要安装正确版本的gulp,该版本已更新到您的npm版本。更新npm运行:
npm install
然后指定吞咽版本,例如:
npm install gulp@^4.0.2