React Native 探索（二）Atom+Nuclide 安裝、配置和除錯

NiZerin發表於2020-02-10

前言
上一篇文章我們搭建了開發環境，並寫了個 Hello World。這一節我們來學習 React Native 的開發 IDE：Atom+Nuclide 的安裝、配置與除錯。本文所講的內容只適用於 Mac 平臺。

1.開發IDE選擇

React Native 的開發 IDE 有很多種，比如 FaceBook 官方推薦的 Atom＋Nuclide、Android Studio 的同門WebStorm（收費）、Sublime Text 3、Visual Studio Code 和 Deco。這裡 Atom＋Nuclide 和 Deco 目前並不支援Windows 平臺。筆者折騰了一段時間 Sublime Text 3，折騰各種外掛直到一臉懵逼。WebStorm 和 Android Studio 很像,它是收費的（可以破解）。WebStorm 的安裝一點難度都沒有，因此本篇文章主要講 Atom+Nuclide 的安裝。
如果你覺得 Atom+Nuclide 卡頓或者不好用，推薦使用 WebStorm，這篇文章會幫助到你：http://blog.csdn.net/it_talk/article/detai...
React Native 開發平臺我建議使用 Mac，能省不少心（開發Android我也建議用Mac來開發）。

2.準備工作

在安裝 Atom＋Nuclide 前需要先安裝 watchman 和 flow。
watchman是 facebook 的一個開源專案，用來監視檔案並且記錄檔案的改動情況，當檔案變化時它可以觸發一些操作。

brew install watchman

flow 是一個開源的 JavaScript 靜態型別檢查器，用來發現 JS 程式中的型別錯誤。

brew install flow

3.Atom+Nuclide安裝

Atom 是 Github 推出的一款開源編輯器，可以直接去官網https://atom.io/ 下載它，安裝過程很簡單。

安裝Nuclide

接下來安裝 Nuclide，Nuclide是 Facebook 在 Atom 的基礎上開發的一個外掛 IDE，可以用來開發React Native、iOS 和 Web 應用。我們開啟 Atom，點選頂部選單欄的 Atom->Preferences，在 Settings 中的 Install 介面搜尋 nuclide，搜尋到 nuclide 後點選 Install 按鈕。如下圖所示。

因為我已經安裝了 Nuclide，所以沒有 Install 按鈕。安裝過程可能需要很長的時間，安裝完畢後重新開啟 Atom 會發現頂部選單欄多了 Nuclide 一欄，說明 Nuclide 安裝成功。

安裝Nuclide相關依賴包

在 Settings 中點選 Packages 介面，點選頂部選單欄的 Packages-> Settings View->Manage Packages 也能進入Packages 介面。在 Packages 介面搜尋 nuclide，並點選 nuclide 的 Settings 按鈕，如下圖所示。

在 nuclide 的 Settings 中勾選 Install Recommended Packages On Startup 選項，並在 Path to Flow executable 輸入 flow 路徑，flow 路徑一般情況下都是：/usr/local/bin/flow，你可以在終端輸入which flow 命令來進行查詢。

重啟 Atom，這些依賴包便會開始自動安裝。

可以看到 nuclide 需要很多的依賴包，如果這些依賴包有哪個沒有安裝成功，Atom 會給出提示，我們在 Settings 的Install 介面進行搜尋安裝就可以了。
安裝完成後會看到介面上多了一條額外的 ToolBar。

配置flow

這時我們通過 Add Project Folder 來開啟我們已有的 React Native 工程，如下圖所示。

這時我們在終端進入 React Native 工程目錄，執行 flow 語句來檢視 flow 是否正常執行，如果發現系統的 flow 版本與工程配置的 flow 版本不一致，則開啟工程中的 .flowconfig 檔案，檢視 flow 的版本。

這裡發現 flow 的版本為 0.42，則在終端輸入如下命令：

npm install flow-bin@0.42 -g

再次在終端輸入 flow，發現 flow 執行正常。接著在 js 檔案的最上方加入/*@flow*/或者//@flow，這樣 flow 就可以開始檢查了。我們隨便加入些錯誤語句來進行測試，如下圖所示。

需要注意的是，網上的文章都是在 index.ios.js 做的測試，這是沒問題的，如果在 index.android.js 中做測試則會發現flow 不好用，這是因為在 .flowconfig 檔案有如下語句：

[ignore]; We fork some components by platform.*/*[.]android.js

所有的以 .android 結尾的 js 檔案的 flow 檢查都會失效，如果去掉該語句則會報100多個error，目前在index.android.js 上筆者沒有先到好的解決方案，如果有人有解決方案，不吝賜教。

4.除錯程式

在終端進入專案目錄並輸入如下命令安裝程式：

react-native run-android

Debugger除錯程式

使用快捷鍵 command + shift + p 開啟輸入框，輸入 debugging，並選擇 Nuclide React Native:Start Debugging：

這時 Atom 彈出 Debugger 介面，並等待進行 Debugger。我們通過 Command+M 進入模擬器的開發選單，選擇Debug JS Remotely。