[反应集成的c插件]

模板地址

反应插件模板

此模板是由作者在今年的Google的“代码之夏”项目“工作时间-用户界面改进”中制作的. 由于我们要使用React的某些组件来优化用户体验播放器build，例如在“工作时间”中，我们希望使用ReactDatepicker来帮助用户选择日期，因此整个“工作时间”插件的前端都尝试使用React编写，并且由于Jenkins的传统插件编写，主要用途是Jelly，这是一套类似于JSP的后端渲染引擎，因此我一开始也踩了很多坑. 如此之多，我可以抽象出一套插件式脚手架，以帮助有类似需求的学生.

GSoC: 工作时间UI改进#6112735123734528

Github: “工作时间”插件

过去，我们可以使用Jelly来开发Jenkins插件的前端部分，并且可以将某些请求绑定到相应的类，但是当我们想将插件接口定制为更高级别时度，果冻似乎也舒展了. 此模板的目的是帮助开发人员使用React来开发插件.

同时，借助React，我们可以使用许多基于React的库，而webpack也可以帮助我们更安全，更有效地使用js库.

|集成React |开发人员可以使用React来完全控制UI. 使用iframe | Iframe隔离了Jenkins之前添加的某些js库的影响，例如Prototype.js. 使用Maven的生命周期|使用Frontend Maven插件，可以在maven的生命周期中同步执行npm脚本. 使用Webpack | Webpack可以减小最终程序包的大小，同时避免js库对所有名称空间的影响. 将Jenkins Crumb附加到每个请求| Jenkins Crumb是Jenkins的一组令牌系统，已自动附加到此模板中的axios上. 使用Express的devserver |您可以单独打开支持热更新的devserver来编写前端界面

插入式用户界面

样品入口

克隆仓库:

git clone https://github.com/jenkinsci/react-plugin-template.git
cd react-plugin-template

安装Maven依赖项和npm软件包

mvn install -DskipTests

运行支持热更新的网页

运行插件

由于默认情况下启用了Jenkins Crumb策略，因此每个请求都必须包含Jenkins Crumb，因此请使用为Jenkins Crumb设置的axiosInstance，可以在src / main / react / app /中找到api.js.

或者，如果您想使用自己的http客户端，则只需将Jenkins Crumb添加到每个请求的标头中. 此标头的键和内容可以是src / main / react / app / utils / urlConfig. js，具体操作如下

当您可以自定义请求时，后端还需要一个处理程序.

Jenkins使用一个名为Stapler的框架来处理请求. 您可以使用继承Action的类来创建子URL，也可以使用StaplerProxy直接转发或处理请求.

链接

订书机参考

如下所示，ManagementLink（继承了Action）将首先获取此请求，然后将其转发到PluginUI进行处理.

然后，装订器将在PluginUI中寻找合适的处理函数，如下所示，doDynamic是一个处理函数，然后是我的自定义，根据URL确定要调用的函数，即getTodos或setTodos，在这里PluginUI可能更像是URL路由器.

您可以使用描述符来保存数据

每当您修改数据时，请调用save（）保存它们. Jenkins使用基于xml的序列化方法来维护数据.

在处理程序中，您可以调用以下代码来查找存储数据的对象.

建议使用管理链接，这将使您的插件具有单独的页面播放器build，并且您可以在系统管理界面/管理中添加一个条目.

原理

此模板只是一个webpack项目

将其放入Maven项目中，然后将webpack的构建结果复制到插件的webapp目录中，然后可以通过iframe中的url对其进行访问，最后由Jelly呈现到该网页上.

因为现在，Jenkins网页上已经添加了很多js库（它似乎已添加到全局页面），所以与较新的库可能会有一些冲突. 因此，iframe可以使我们的插件在相对“干净”的环境中运行.

Github: React插件模板

Github: 工作时间插件

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-222610-1.html