Node-RED uibuilder 升級ver. 2.x.x

在舊站時期的時候
有發表了一篇Node-RED + uibuilder + vue顯示網頁的教學
隨著Node-RED更新
uibuilder主版本其實也早就更新到2
是時候要升級一下教學了
uibuilder的github官方文件

先安裝uibuilder
在Node-RED環境資料夾下:

$npm install node-red-contrib-uibuilder

官方文件中定義常數對應的路徑:

參數名預設位置
uibRoot~/.node-red/uibuilder
userDir~/.node-red

~/.node-red也可以替換成你目前的Node-RED環境資料夾
(如果要以其它資料夾啟動Node-RED,終端機的命令如下:

$node-red --userDir DIR

接下來,就是與1.x.x版本不一樣的地方了
url path讀取的路徑以以下的優先權決定:

  • <uibRoot>/<instanceName>/dest/
  • <uibRoot>/<instanceName>/src/
  • <userDir>/node_modules/node-red-contrib-uibuilder/nodes/dest/
  • <userDir>/node_modules/node-red-contrib-uibuilder/nodes/src/

<instanceName>為在uibuilder節點中的url path
如我的範例路徑為vue

<instanceName>就會是vue

這一版本的變更,讓我們不用再設定東西就可以在我們的網頁使用npm modules了
而且uibuilder預設的網頁框架為vue

.node-red資料夾的node_modules資料夾會對應於../uibuilder/vendor/modulename/
在官方的html範例中是這樣的

<script src=”../uibuilder/vendor/socket.io/socket.io.js”></script>

如果是從1.x.x版本升級的人
除了要改動html import模組路徑外
vue在mounted記得加上

uibuilder.start()

以上請參考~

發佈留言