Node-RED教程(十六):发布自定义Node-RED的npm包

Node-RED系列文章目前已经写了16篇,介绍了Node-RED的安装以及默认安装的一些基本节点的使用,作为物联网的一个可视化拖动的流程,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

整个流程到此结束。

拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页