为什么我的 npm install 在 Mac 上为 React Native 安装失败？

Question

React Native 新手我已确保从 here 安装 node.js，安装后有人告诉我：

Node.js v9.5.0 to /usr/local/bin/node
npm v5.6.0 to /usr/local/bin/npm

我可以验证节点版本：

node --version: v9.5.0

我为npm install 运行了文档的getting started：

npm install -g create-react-native-app

还引用了 building projects 并使用 brew 安装了守望者：

watchman 4.9.0

在终端运行：npm install -g react-native-cli 和终端：npm start 我得到：

grim ~/react-native/react-native npm start

> react-native@1000.0.0 start /Users/grim/React-Native/react-native
> /usr/bin/env bash -c './scripts/packager.sh "$@" || true' --

module.js:557
    throw err;
    ^

Error: Cannot find module 'graceful-fs'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/grim/React-Native/react-native/local-cli/cli.js:12:1)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
grim ~/react-native/react-native 

经过研究，我发现NPM, cannot find 'graceful-fs', no matter what I do 并在终端运行：

sudo npm install -g graceful-fs

然后得到：

+ graceful-fs@4.1.11
added 1 package in 0.678s

但是当我运行npm install 时，我得到：

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "npm:": npm:babylon@^7.0.0-beta
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/grim/.npm/_logs/2018-02-08T17_08_50_619Z-debug.log

并在文件日志中显示：

116 error code EUNSUPPORTEDPROTOCOL
117 error Unsupported URL Type "npm:": npm:babylon@^7.0.0-beta

所以我去了The Problem with gulp-util，但是当我这样做时：

npm ls gulp-util

我收到└── (empty)。

我发现Why is my npm install not working? 的进一步研究但抛出了npm ERR! 我做错了什么以及如何在运行Seirra 的Mac 上成功安装npm？

造成这种情况的原因是试图从react native repo 测试RNTester，它告诉我：

git clone https://github.com/facebook/react-native.git
cd react-native
npm install

---

编辑

根据建议的答案已经尝试过brew install node 并被告知警告node 9.5.0 is already installed 所以尝试brew link node 然后提示：

grim ~/react-native/react-native brew link node
Linking /usr/local/Cellar/node/9.5.0... 
Error: Could not symlink bin/node
Target /usr/local/bin/node
already exists. You may want to remove it:
  rm '/usr/local/bin/node'

To force the link and overwrite all conflicting files:
  brew link --overwrite node

To list all files that would be deleted:
  brew link --overwrite --dry-run node

所以跑了brew link --overwrite node。

---

编辑

浏览我在Users/grim 下的文件时，我发现了一个包含模块的目录，名为node_modules，这可能是在错误的位置吗？

---

编辑

经过进一步研究，我找到了Fixing npm On Mac OS X for Homebrew Users 并运行：

rm -rf /usr/local/lib/node_modules
brew uninstall node
brew install node --without-npm
echo prefix=~/.npm-packages >> ~/.npmrc
curl -L https://www.npmjs.com/install.sh | sh

用 nano 修改了我的 ~/.bash_profile：

export PATH="$HOME/.npm-packages/bin:$PATH"

运行npm install 并收到一个丢失的package.json 文件，因此在终端中执行npm init 并回答了问题。返回并指向克隆的 repo，当我运行 npm install:

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "npm:": npm:babylon@^7.0.0-beta
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

但如果我使用 react-native init AwesomeProject 和 npm install 构建一个新项目，我会得到：

up to date in 0.416s

我可以指向项目并执行 react-native run-ios 并且它可以工作，但 react-native run-android 必须在 build.bundle 中从：classpath 'com.android.tools.build:gradle:2.2.3' 调整为 classpath "com.android.tools.build:gradle:2.1.0"

Answer 1

使用 Homebrew for Mac 作为包管理器；

https://brew.sh/

然后你可以运行：brew install node

还有许多其他实用程序。

Answer 2

create-react-native 应用程序不适用于 npm 5。

我在 Windows 上遇到了同样的问题，将我的 npm 降级到 4，你可以使用 npm i -g npm@4 降级。