即時顯示 ReasonML 結果

ReasonML 官方雖然提供了 Bsb、rtop 與 Sketch.sh 三種測試平台,但或許你還是比較喜歡 VS Code + Quokka 的方式,只可惜目前 Quokka 尚未支援 ReasonML,讓我們自己手工打造類似 Quokka 的測試環境。

Version


macOS Mojave 10.14.4
VS Code 1.33.0
ReasonML 3.0.4
Bsb 5.0.0
Nodemon 1.18.0

安裝 Node


(略)

安裝 Yarn


(略)

安裝 Bsb


1
$ yarn global add bs-platform

Bsb 為 ReasonML 的建置系統,負責將 ReasonML 編譯成 ECMAScript。

reason000

建立 Node 專案


1
$ bsb -init reasonml-playground -theme basic-reason

使用 bsb 建立 Node 專案。

  • -init:建立 sample project
  • -theme:sample project 主題,使用 basic-reason

目前 Bsb 支援兩個主題:

  • basic-reason:建立 Node 專案
  • react:建立 ReasonReact 專案

reason001

安裝 Nodemon


1
$ yarn global add nodemon

將使用 nodemon 監視 *.js 的變動,自動重新執行 Node。

reason002

開啟 VS Code


package.json

1
"nodemon": "nodemon src/Demo.bs.js"

使用 VS Code 開啟 package.json,在 scripts 新增 nodemon

reason003

Yarn start


1
$ yarn start

*.re 按下存檔時,Bsb 會自動將 ReasonML 編譯成 ECMAScript。

reason004

Yarn nodemon


1
$ yarn nodemon

*.js 改變時,Node 會自動重新執行。

reason005

改變檔案後,由於 VS Code 會自動存檔,結果會立刻改變。

reason006

Conclusion


  • Sketch.sh 雖然好用,但無法測試學習 BuckleScript 部分
  • 透過 nodemon,我們也可以在熟悉的 VS Code 測試學習 ReasonML + BuckleScript,並且立即顯示結果

Reference


Dr. Axel Rauschmayer, Running code snippets via Node.js and nodemon
Remy Sharp, nodemon