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

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

• 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行， 修改成如下

// 代码归属人 拿我格子衫来
        '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/editor-api中的package.json

修改@node-red/editor-client中的package.json

第三步

修改完package.json后，需要将代码中的引用也同时修改

第四步

在项目根目录执行

# 代码归属人 拿我格子衫来
grunt release

可能需要全局安装一个grunt
执行完成后，会在项目的根目录看到一个 .dist目录

这里就生成了npm包。 同时这里也生成了一个批量发布的脚本，如果要使用这个脚本还需要更改一些东西，我们就不使用这个脚本了，直接手动发布包。

发布包

进入.dist/modules目录,执行npm发布命令

#代码归属人 拿我格子衫来
cd .dist/modules
npm publish pmc-nodered-1.2.11.tgz
npm publish pmc-editor-client-1.2.10.tgz
npm publish pmc-editor-api-1.2.10.tgz

当然了这一步首先要有已经登录的npm账号。
发布完成后，就能在自己的npm账号下看到对应的包了。

安装使用

要安装使用需要先卸载以前的node-red
安装使用的脚本

# 代码归属人 拿我格子衫来
sudo npm install -g --unsafe-perm pmc-nodered
node-red

浏览器打开 ip+1880

整个流程到此结束。