Node-RED系列（十四）：定制Node-RED的UI_专栏

Node-RED系列文章目前已经写了13篇，介绍了Node-RED的安装以及默认安装的一些基本节点的使用，作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。

本篇文章可能是这个系列的倒数第二篇文章，确切说，本篇文章可能是最后一篇Node-RED系列的技术文章。后面会写一篇有关本系列文章的写作总结，以及自己在学习的过程中一下经验分享给大家。写这个系列花了不少时间和精力，但也确实帮助了很多人。很多人拜托我解决各种各样的Node-RED问题，其实在三个月前，我也是一个小白，只是机缘巧合进入了这个物联网领域。后续如果还有人想看Node-RED的其他技术解析，可以留言给我。我会抽时间给安排上。最后，写作不易，如果对你有帮助，请不要吝啬你的赞。让我们进入最后一篇的Node-RED技术分享吧。

本篇文章我将带领大家对开源物联网平台Node-RED，从源码层面上进行定制化修改。

环境搭建

搭建一个Node-RED的开发环境需要安装一下软件

nodejs
git （可选）
vscode （可选）

直接从github下载源码

git clone https://github.com/node-red/node-red.git

下载完成后

cd node-red

npm i # 安装依赖包

npm run dev # 启动开发环境

启动日志

> node-red@1.2.9 dev D:\my\node-red
> grunt dev

Running "clean:build" (clean) task
>> 3 paths cleaned.

Running "jsonlint:messages" (jsonlint) task
>> 35 files lint free.

Running "jsonlint:keymaps" (jsonlint) task
>> 1 file lint free.

Running "concat:build" (concat) task

Running "concat:vendor" (concat) task

Running "copy:build" (copy) task
Created 10 directories, copied 84 files

Running "uglify:build" (uglify) task
>> 4 files created 1.98 MB → 745.63 kB

Running "sass:build" (sass) task

Running "attachCopyright:js" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/red.min.js
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/main.min.js

Running "attachCopyright:css" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/style.min.css

Running "setDevEnv" task

Running "concurrent:dev" (concurrent) task
    Running "nodemon:dev" (nodemon) task
    Running "watch" task
    Waiting...
    [nodemon] 2.0.6
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching path(s): packages\node_modules\**\*
    [nodemon] watching extensions: js,html,json
    [nodemon] starting `node packages/node_modules/node-red/red.js -V`
    10 Mar 11:19:20 - [info]

    Welcome to Node-RED
    ===================

    10 Mar 11:19:20 - [info] Node-RED version: v1.2.9
    10 Mar 11:19:20 - [info] Node.js  version: v14.16.0
    10 Mar 11:19:20 - [info] Windows_NT 10.0.18363 x64 LE
    10 Mar 11:19:21 - [info] Loading palette nodes
    10 Mar 11:19:21 - [info] Settings file  : C:\Users\fizz\.node-red\settings.js
    10 Mar 11:19:21 - [info] Context store  : 'default' [module=memory]
    10 Mar 11:19:21 - [info] User directory : C:\Users\fizz\.node-red
    10 Mar 11:19:21 - [warn] Projects disabled : editorTheme.projects.enabled=false
    10 Mar 11:19:21 - [info] Flows file     : C:\Users\fizz\.node-red\flows_GZDP-DZ-00046.json
    10 Mar 11:19:21 - [info] Creating new flow file
    10 Mar 11:19:21 - [warn]

    ---------------------------------------------------------------------
    Your flow credentials file is encrypted using a system-generated key.

    If the system-generated key is lost for any reason, your credentials
    file will not be recoverable, you will have to delete it and re-enter
    your credentials.

    You should set your own key using the 'credentialSecret' option in
    your settings file. Node-RED will then re-encrypt your credentials
    file using your chosen key the next time you deploy a change.
    ---------------------------------------------------------------------

    10 Mar 11:19:21 - [info] Starting flows
    10 Mar 11:19:21 - [info] Started flows
    10 Mar 11:19:21 - [info] Server now running at http://127.0.0.1:1880/

看到这句日志，Server now running at http://127.0.0.1:1880/就是说明Node-RED已经正常启动了。
使用浏览器打开http://127.0.0.1:1880/ 即可看到页面

缺少图片

项目架构

Node-RED是使用Grunt来进行构建的打包的，这一点可以根据package.json中的
scripts得到，另外在项目的根目录下也存在一个Gruntfile.js文件定义了项目如何构建，打包，编译，文件处理。
使用web框架是"express": "4.17.1", 国家化使用"i18next": "15.1.2",
样式时使用"node-sass": "^4.14.1",
页面模板使用的是"mustache": "4.1.0",

目录解析

缺少项目主目录图片
文件夹的用途说明

.github 用于定义github cicd的Actions
packages 项目核心代码
scripts 用于处理自定义主题，验证包依赖版本的一些js脚本和shell脚本
test 存放测试用例的地方
Gruntfile.js 定义Grunt任务用于项目构建，编译，文件处理
。。。。

在核心代码packages目录中有二个比较重要的目录一个是@node-red 一个是node-red

没有带@的node-red目录是用于定义Node-red命令行操作符的。
带有@的@node-red目录是存放项目所有源码，包括客户端和服务端。

在@node-red中又有以下几个目录

editor-api 服务端代码
editor-client 客户端代码
nodes 默认安装的节点
registry 暂时不知
runtime 暂时不知
util 国际化，日志，常用函数

要修改客户端页面需要在editor-client中找相应的文件
要修改配置，服务端代码需要在editor-api中找相应的文件

主要文件分析

colors.scss

定义项目的主题，配色，

$primary-background: #0ff;//#0ff;  主背景色

$secondary-background: #ff0;//#ff0; 副背景色，

修改样式后需要重启项目才能生效。

npm run dev

theme.js

此文件配置了项目的title， favicon,

修改 page与header属性，重启和生效
如下是我的修改。

page: {
    title: "TopFE",
    favicon: "mylogo.png",
    tabicon: "mylogo.png"
},
header: {
    title: "TopFE",
    image: "mylogo.png"
}

page定义的是网站title相关信息，
header定义的是网站右上角的图标和标题。

主题简单改造

修改背景颜色，标题，图标
theme.js

var defaultContext = {
    page: {
        title: "Node-RED",
        favicon: "favicon.ico",
        tabicon: "red/images/node-red-icon-black.svg"
    },
    header: {
        title: "Node-RED",
        image: "red/images/node-red.svg"
    },
    asset: {
        red: (process.env.NODE_ENV == "development")? "red/red.js":"red/red.min.js",
        main: (process.env.NODE_ENV == "development")? "red/main.js":"red/main.min.js",

    }
};

colors.scss

$primary-background: #f3f3f3;//#0ff;

$secondary-background: #fff;//#ff0;

将文件mylogo.png放到packages/node_modules/@node-red/editor-client/src/mylogo.png

并再Gruntfile.js中配置该文件

最终效果图

Node-RED系列（十四）：定制Node-RED的UI