Ant Design Pro V4安装"辛"路历程

新版本antd pro后台项目的demo搭建使用
简书地址

以前安装ant design pro从github上clone下来，两句话就在浏览器看到登录页面了，现在这个东西越来越臃肿了，我就想要个页面，跑起来给客户看看样子，结果废了老劲了，也不知道都往里面搞了啥。

今天记录一下吧。
参考官网教程.
选择ant-design-pro,Pro V4，TypeScript，complete.

$ npm create umi
? Select the boilerplate type ant-design-pro
? 🧙 Be the first to experience the new umi@3 ? Pro V4
? 🤓 Which language do you want to use? TypeScript
? 🚀 Do you need all the blocks or a simple scaffold? complete
> 🙈 complete mode can only use the version of antd@4
Cloning into '/Users/marvin/git/opensource/react/antd-pro'...
remote: Enumerating objects: 564, done.
remote: Counting objects: 100% (564/564), done.
remote: Compressing objects: 100% (481/481), done.
remote: Total 564 (delta 89), reused 318 (delta 62), pack-reused 0
Receiving objects: 100% (564/564), 461.41 KiB | 435.00 KiB/s, done.
Resolving deltas: 100% (89/89), done.
> 🚚 clone success
> Clean up...
✨ File Generate Done

项目创建成功后执行npm install,出个错

> node-pty@0.10.0-beta9 install /Users/marvin/git/opensource/react/antd-pro/node_modules/node-pty
> node scripts/install.js

gyp WARN install got an error, rolling back install
gyp ERR! configure error
gyp ERR! stack ZlibError: zlib: unexpected end of file
gyp ERR! stack     at Unzip.write (/Users/marvin/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/minizlib/index.js:147:22)
gyp ERR! stack     at Unzip.flush (/Users/marvin/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/minizlib/index.js:98:10)
gyp ERR! stack     at Unzip.end (/Users/marvin/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/minizlib/index.js:104:10)
gyp ERR! stack     at Unpack.end (/Users/marvin/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/tar/lib/parse.js:421:21)
gyp ERR! stack     at IncomingMessage.onend (_stream_readable.js:679:10)
gyp ERR! stack     at Object.onceWrapper (events.js:420:28)
gyp ERR! stack     at IncomingMessage.emit (events.js:326:22)
gyp ERR! stack     at IncomingMessage. (/Users/marvin/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/request/request.js:1000:23)
gyp ERR! stack     at IncomingMessage.emit (events.js:326:22)
gyp ERR! stack     at TLSSocket.socketCloseListener (_http_client.js:435:11)
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/Users/marvin/.nvm/versions/node/v14.5.0/bin/node" "/Users/marvin/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/marvin/git/opensource/react/antd-pro/node_modules/node-pty
gyp ERR! node -v v14.5.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

查了半天，按照https://www.jianshu.com/p/a2a2ddeb174c
的思路，错误变成了下面这个

$ npm install

> fsevents@1.2.13 install /Users/marvin/git/opensource/react/antd-pro/node_modules/jest-environment-jsdom-fourteen/node_modules/fsevents
> node install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/marvin/.nvm/versions/node/v12.8.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:344:16)
gyp ERR! stack     at ChildProcess.emit (events.js:203:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/Users/marvin/.nvm/versions/node/v12.8.0/bin/node" "/Users/marvin/.nvm/versions/node/v12.8.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/marvin/git/opensource/react/antd-pro/node_modules/jest-environment-jsdom-fourteen/node_modules/fsevents
gyp ERR! node -v v12.8.0
gyp ERR! node-gyp -v v5.0.3
gyp ERR! not ok

在查询错误，终于https://juejin.im/post/6844904058076020743上找到了解决方案。

解决方案

1. 尝试用如下命令进行修复

   $ xcode-select --install
   

   复制代码系统提示如下信息：

   xcode-select: error: command line tools are already installed, use "Software Update" to install updates
   

   复制代码而事实上并没有所谓的”Software Update”可以更新
2. 正确姿势
   一筹莫展之际，找到如下解决方案：

   $ sudo rm -rf $(xcode-select -print-path)
   $ xcode-select --install
   

   终于安装成功了。