使用Sublime Text 3製作可攜式React開發環境

在閱讀facebook React學教手冊時，希望能動手寫個「Hello World!」，這才發現，我們被Visual Studio保護的太好，根本不知道火星(前端)是個什麼樣的世界，目前VS2015對React的支援還很有限，只好把Sublime Text請出來。但公司、家裡每一台電腦都需要重新設置一次又很麻煩，想到了Sublime Text的portable version，不用還好，一用就愛上了它的方便性。

Sublime Text 3 portable version

之前和同事聊天才學到，原來Sublime Text本身的portable version是個很棒的設計。portable想成「綠色軟體」，即不用安裝下載即用。然後在這個下載的portable版本裡，你可以依照不同的工作模式去製作各種的開發環境，例如，JavaScript開發環境、CSS開發環境、PHP開發環境、AngularJS開發環境、C#開發環境…等，並且互相不干擾。

這樣，可以讓每一個portable保有小又快的特性(不太會有越來趣肥越慢的問題，因為每一portable只針對一個某個開發環境來製作)，並且帶到那用到那，換電腦也不必重新設定，非常方便。

React開發環境

以下Sublime Text 3的portable version並設定React的開發環境。

Node.js

Visual Studio 2015預設會安裝Node.js，沒有的就下載安裝吧。

Node.js安裝完成之後，打開「命令提示字元」(cmd.exe)，執行以下指令，安裝react-tools：

npm install -g react-tools

Packages

以下整理Sublime Text 3上開發React上我覺得不錯用的套件。

• ReactJs
• Babel
• Babel Snippets
• Emmet (在jsx需額外修改才能使用)
• LiveReload (請不要透過Package Control安裝)
• View in Browser

ReactJs、Babel、Babel Snippets算是開發React必備的三套。Emmet、LiveReload、View in Browser是個人額外推薦的三套，用來加速開發效率。Emment的使用可以之參之前的文章，LiveReload下面會介紹，View In Browser是建立一個快速啟動瀏覽器的方式(透過Ctrl+Alt+V)，直接瀏覽目前正在開發的頁面。

另外之前介紹過另一套LiveStyle比較不合適React的開發環境，LiveStyle合適於CSS的開發環境。

以下針對推薦且需要額外修改或設定的兩個套件做整理。

Emmet for React

如果各位希望在撰寫JSX時，Emmet也能支援的話，必須進行以下設置。

【Preferences → Key Bindings - User】加入以下設定值：

 [
  {
      "keys": ["tab"], 
      "command": "expand_abbreviation_by_tab", 
      "context": [
          {
           // 這裡指定作用的"副檔名"
           // 預設為 .jsx
              "operand": "source.js", 
              "operator": "equal", 
              "match_all": true, 
              "key": "selector"
          },
          {   
              "key": "selection_empty", 
              "operator": "equal", 
              "operand": true,
              "match_all": true 
          }
      ]
  },
  { 
   "keys": ["tab"], 
   "command": "next_field", 
   "context":
      [
          { 
           "key": "has_next_field", 
           "operator": "equal", 
           "operand": true 
       }
      ]
  }
 ]  
 

operand的值注意一下，有些開發人員的JSX檔習慣用.js副檔名而非.jsx，其實連官方範例檔也是用.js，operand就是指定作用的副檔名。如果沒有作用，切換檔案類型至Javascript (Babel)。

LiveReload

我從Package Control上下載的是無法使用的，查詢之後有個「ST3-LiveReload」可以正常運作。步驟如下：

1. 由Github下載ST3-LiveReload壓縮檔
2. 解壓縮後將目錄改名為LiveReload
3. Preferneces → Browse Packages → 將改好名的LiveReload目錄複製過去
4. 重開Sublime Text 3，Preferneces → Package Settings，檢查是否多一個LiveReload選項

最後進行LiveReload的設置：Preferneces → Package Settings → LiveReload → Settings-Default

 {
     "enabled_plugins": [
         "SimpleReloadPlugin",
         "SimpleRefresh"
     ]
 }   
 

以上就完成了LiveReload的安裝與設置。接下來必須安裝瀏覽器擴充程式，以接收LiveReload發送的重新整理指令。

• Chrome： https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

記的安裝Chrome LiveReload擴充程式安裝之後，請再額外勾選允許存取檔案網址，這樣我們才能在本機進行LiveReload的連線與測試。

自動化編譯JSX為JS

利用以上的開發環境，你已經可以練習寫未分離JSX(頁面內含JSXTransformer-*.js)，但要進行分離JSX的相關練習還差一小步。分離的JSX，我們必須透過一個編譯器轉換為正常的.js，這樣瀏覽器才能正常執行。

一開始安裝的react-tools就是為了這個目的。

在專案目錄下開啟命令提示字元並輸入jsx --watch src/ build/，"src/"來源目錄，"build/"目的地目錄，"--watch"是當"src/"目錄的檔案有異動時執行自動編譯，不加的話就是手動編譯。你就可以在"src/"目錄下開發JSX，當你儲存時就會自動編譯.js到"build"。如果是當下目錄編譯到"build/"，也可以這樣下jsx --watch . build/

當然，使用jsx指令和正統前端會使用的Grunt、Gulp或webpack還有一段距離。但對於我這位偽前端也足夠了。

React的除錯工具

我有找到一篇參考資料：http://cheng.logdown.com/posts/2015/07/10/setup-sublime-text-3-for-reactjs-development。可能是我還是HelloWorld等級，所以試不太出來效果，只能先列在這裡給各位參考。

最後，我是把此版本放在OneDrive之中，這樣我的每台電腦就自動擁有一套React開發環境的Sublime Text 3開發工具。其他的的開發環境都能以此類推。讓我們大喊一聲Sublime Text portable version好讚。