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

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

facebook logo

在閱讀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)

Emment React JSX

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 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 command message

當然,使用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好讚。

1 則留言:

  1. Bruce大, 請問如果沒有自動產生webpack.config.js , 我應該怎麼做, 謝謝您

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。