首页 > 技术知识 > 正文

Node-RED系列（十六）：发布自定义Node-RED的npm包

2023-05-11 13:51:11

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

物联网平台Node-RED系列（一）：Node-RED的介绍与安装

物联网平台Node-RED系列（二）：Node-RED的面板的操作

物联网平台Node-RED系列（三）：Node-RED公共节点的使用

物联网平台Node-RED系列（四）：Node-RED函数节点的使用

物联网平台Node-RED系列（五）：Node-RED序列节点的使用

物联网平台Node-RED系列（六）：Node-RED解析节点的使用

物联网平台Node-RED系列（七）：Node-RED存储节点的使用

物联网平台Node-RED系列（八）：Node-RED网络节点的使用

Node-RED系列（九）：Node-RED面板dashboard节点的使用

Node-RED系列（十）：Node-RED面板dashboard节点的配置

Node-RED系列（十一）：Node-RED面板chart节点的使用案例

Node-RED系列（十二）：定制化节点教程

Node-RED系列（十三）：三种方式安装启动安装Node-Red

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

Node-RED系列（十五）：工业仪表盘开发

前面几篇我们讲了一下如何对物联网Node-RED进行自定义修改，定制UI,今天我们就讲一下，如何在定制UI后发布一个自己的npm包，就像Node-red一样使用。

我们介绍过，安装node-red有三种方式，其中一种就是使用npm全局安装，然后再运行 node-red指令启动服务。这次我们的目标是做一个基于node-red的源码，改造，编译，发布，运行的整个流程。

方案探索

在第十四篇我们介绍了如何进行Node-red的自定义修改，分析了它的源码，框架。如何没看过的，请一定要先去看一下，因为本文需要对node-red架构有一定的了解。

言归正传，既然我们要发布自定义的Node-RED,那就要知道Node-red有那些包。具体有几个npm包

node-red 主包，程序入口 @node-red/editor-api 服务端 @node-red/editor-client 客户端就是我们看到的页面 @node-red/runtime 运行时 @node-red/util 公用函数，工具 @node-red/nodes 基础，内置，节点 @node-red/registry 用于节点管理，安装，依赖，注册，加载，

我们要发布一个自己的npm包，那是不是意味着我们要将每一个包都要重新编译成自己的那？并不是的，我们只需要重新发布我们修改的几个包，以及主包，程序入口即可。

此外我们还有分析这几个包的依赖关系，可以直接在npm的包详情页看到。

这里我就简单说以，

node-red 包依赖 @node-red/editor-api, @node-red/runtime, @node-red/util, @node-red/nodes @node-red/editor-api 包依赖 @node-red/util, @node-red/editor-client @node-red/editor-client 包没有依赖

这次改造只涉及这几个包，其他包我们暂时不做修改，因为其他的包都是偏底层的包。

如果我们在node-red中改了一个背景色，那么我们就要重新构建这三个包，如果构建那？这是一个大问题

答案就在项目的Gruntfile.js中，

在这个文件中注册了一个任务叫做 release任务具体代码

grunt.registerTask(release, Create distribution zip file, [build,clean:release,mkdir:release,chmod:release,compress:release,pack-modules,generatePublishScript]);

大概在665行左右。这个任务其实就是将项目中的几个包进行构建编译，最后生成一个能够publish的shell脚本，我也是看了很多才找到的。

任务的具体细节我就不说了，很容易就能理解。下面说下怎么修改。

第一步

找到 npm-command定义的地方，大概在418行，修改成如下 Node-RED系列（十六）：发布自定义Node-RED的npm包

// 代码归属人拿我格子衫来 npm-command: { options: { cmd: “pack”, cwd: “<%= paths.dist %>/modules” }, pmc-nodered: { options: { args: [__dirname+/packages/node_modules/node-red] } }, pmc-editor-api: { options: { args: [__dirname+/packages/node_modules/@node-red/editor-api] } }, pmc-editor-client: { options: { args: [__dirname+/packages/node_modules/@node-red/editor-client] } }, }, 第二步

修改node-red中的package.json文件 Node-RED系列（十六）：发布自定义Node-RED的npm包1