[發明專利]可視化界面組件熱部署方法和客戶端、服務端

在審

• 申請號: 201911157083.4
• 申請日: 2019-11-22
• 公開（公告）號: CN111078231A
• 公開（公告）日: 2020-04-28
• 發明（設計）人: 李權;陳英杰;姚煒
• 申請（專利權）人: 浙江藍卓工業互聯網信息技術有限公司
• 主分類號: G06F8/60
• 分類號: G06F8/60;G06F8/41;H04L29/08
• 代理公司: 杭州華鼎知識產權代理事務所(普通合伙) 33217
• 代理人: 黃利群

本發明公開了可視化界面組件熱部署方法和客戶端、服務端，方法包括如下步驟：客戶端編寫定制開發的React組件；客戶端將定制開發的React組件上傳至服務端，所述React組件經靜態解析得到源文件和編譯文件后保存在服務端；客戶端從服務端下載編譯文件并動態解析；客戶端本地執行所述編譯文件，將React組件注冊到運行環境中，渲染在瀏覽器；同時，公開了相應的客戶端、服務端。本發明在已部署在服務器上的系統，在不重啟或者不編譯的情況下，可以動態渲染用戶自定義開發并上傳到服務端的React組件，實現React組件在客戶端無需靜態編譯即可動態解析的運行環境，極大方便用戶做一系列定制化需求。

技術領域

本發明涉及工業互聯網技術領域，尤其涉及一種應用于工業互聯網的可視化界面組件熱部署方法和客戶端、服務端。

背景技術

當一個工業互聯網的可視化界面系統開發完成后，為了使用戶能擴展系統的功能，需要系統提供可及時運行用戶開發的React組件的運行環境，用戶可依據自己的業務需求進行定制和改寫，無需服務器停機更新。

現階段的可視化界面系統，基于React軟件框架開發完成后，需要通過Webpack、Rollup、Grunt等工具靜態解析編譯ES6和JSX語法后才能在瀏覽器中正常運行并渲染出頁面。

現有的可視化界面系統提供的功能并不能滿足用戶需求，往往需要用戶必須更新系統源碼，并重新通過工具解析編譯，最后部署到服務器上，才能正常運行定制開發的React組件。因此，現有操作較為繁瑣，更新效率較低。

發明內容

本發明提出一種可視化界面組件熱部署方法和客戶端、服務端以解決上述技術問題。

為了達到上述目的，本發明所采用的技術方案為：

根據本發明實施例的第一方面，提供了一種可視化界面組件熱部署方法，應用于工業互聯網，包括如下步驟：

步驟101，客戶端編寫定制開發的React組件；

步驟102，客戶端將定制開發的React組件上傳至服務端，所述React組件經靜態解析得到源文件和編譯文件后保存在服務端；

步驟103，客戶端從服務端下載編譯文件并動態解析；

步驟104，客戶端本地執行所述編譯文件，將React組件注冊到運行環境中，渲染在瀏覽器。

作為優選，所述步驟102中，所述React組件上傳至服務端后在服務端靜態解析得到源文件和編譯文件；或者，所述React組件在客戶端靜態解析得到源文件和編譯文件后，再上傳至服務端。

作為優選，所述靜態解析選擇Babel作為編譯器。

作為優選，所述React組件包含依賴文件；

步驟102還包括：將依賴文件上傳至服務器，所述依賴文件保存在服務器；

步驟103還包括：客戶端從服務端下載依賴文件并執行。

作為進一步的優選，所述步驟102中，依賴文件保存在服務器時，依賴文件的保存采用UMD的輸出規范；所述步驟103中，從服務端下載編譯文件并動態解析時遇到編譯文件中帶有ES6import語句時，則從服務端下載與該語句對應的依賴文件，直到所有依賴文件都被下載并執行完成。

根據本發明實施例的第二方面，提供了一種客戶端，應用于工業互聯網的可視化界面組件熱部署，包括：

組件編寫模塊，用于編寫定制開發的React組件；

上傳模塊，用于將定制開發的React組件上傳至服務端，所述React組件經靜態解析得到源文件和編譯文件后保存在服務端；

下載模塊，用于從服務端下載編譯文件并動態解析；