监控平台之rollup打包

news2024/9/22 11:42:05

设计思路

1.根据模块,通过index.js去调用执行调用

2.WebEyeSDK.js暴露方法,同时定义init方法,去初始化config里的上报参数

3.rollup/build里入口文件为WebEyeSDK.js进行打包

4.打包编译用babel,同时安装babel/preset-env智能预设(可去webpack专栏查看)

5.bundle格式,原文件采用iife格式,原因是

  1. 创建只使用一次的函数,并立即执行它。
  2. 创建闭包,保存状态,隔离作用域。
  3. 作为独立模块存在(例子如jQuery),防止命名冲突,命名空间注入(模块解耦)。

6.其他格式,esm,cjs打包,静态异步和同步方式进行打包

项目整体架构流程图

rollup打包文件

plugin:

rollup/plugin-json 上报数据采用json格式保存,Rollup 会将 data.json 的内容嵌入到生成的 bundle.js 文件中,这样你就可以在最终的代码中使用 JSON 数据。

@rollup-plugin-babel:同babel/preset-env,进行智能预设,会根据版本,浏览器进行语法编译

const path = require('path')
const json = require('@rollup/plugin-json')
const {babel} = require('@rollup/plugin-babel')

const resolveFile = function(filePath) {
    return path.join(__dirname, filePath)
}

const plugins= [
    json(
        {
            compact: true
        }
    ),
    babel({
        extensions: ['.js','.ts'],
        babelHelpers: 'bundled',
        presets: [
            [
                '@babel/env',
                {
                    targets: {
                        browsers: [
                            '> 1%',
                            'last 2 versions',
                            'not ie <= 8',
                        ]
                    }
                }
                ]
        ]
    })
]

module.exports = [
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.js'),
            format: 'iife',
            name: 'WebEyeSDK',
            soucemap: true,
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    },
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.js'),
            format: 'iife',
            name: 'WebEyeSDK',
            soucemap: true,
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    },
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.esm.js'),
            format: 'esm',
            name: 'WebEyeSDK',
            soucemap: true,
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    },
    {
        plugins,
        input: resolveFile('../src/webEyeSDK.js'),
        output: {
            file: resolveFile('../dist/webEyeSDK.cjs.js'),
            format: 'cjs',
            name: 'WebEyeSDK',
            soucemap: true,//
            // globals: {
            //     'vue': 'Vue',
            // }
        }
    }
]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2102821.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SQL 编程基础

SQL&#xff08;结构化查询语言&#xff09;广泛应用于数据库操作&#xff0c;是每个程序员都需要掌握的技能之一。这篇文章将带你从基础入门&#xff0c;了解SQL编程中的常量、变量及流程控制语句。我们将采用简单易懂的语言&#xff0c;结合实际示例&#xff0c;帮助你轻松理…

(纯JS)图片裁剪

前言 不同的展示平台或印刷尺寸对图片的比例和尺寸有特定要求。通过裁剪,可以将照片调整为适合社交媒体、网站、相框或画册等不同输出渠道的尺寸和比例。工作上,有些人可能不方便上网,需要离线完成图片的裁剪.无意中发现,纯JS也可以制作出这样一个工具. 目录 功能 优点 主页…

亚信安全荣获“2024年网络安全优秀创新成果大赛”优胜奖

近日&#xff0c;由中央网信办网络安全协调局指导、中国网络安全产业联盟&#xff08;CCIA&#xff09;主办的“2024年网络安全优秀创新成果大赛”评选结果公布。亚信安全信舱ForCloud荣获“创新产品”优胜奖&#xff0c;亚信安全“宁波市政务信息化网络数据安全一体化指挥系统…

记:子线程实现QTcpSocket读写的问题

最近在改进考勤系统客户端多线程实现时遇到了线程异步和野指针问题 client&#xff1a;多线程实现ui界面显示&#xff08;主线程&#xff09;、人脸检测&#xff08;检测线程&#xff09;、socket网络通信&#xff08;通信线程)三个任务。 主线程&#xff1a; TimerEvent实时…

Windows安装docker,启动ollama运行open-webui使用AIGC大模型写周杰伦歌词

Windows安装docker&#xff0c;启动ollama运行open-webui使用AIGC大模型写周杰伦歌词 1、下载docker的Windows版本。 docker下载地址&#xff1a; https://docs.docker.com/desktop/install/windows-install/https://docs.docker.com/desktop/install/windows-install/ 2、设…

知识点复习3

Linux文件 索引节点inode 存放的是数据在磁盘中的位置 以及文件的一些基本信息比如说文件大小还有权限&#xff0c;目录项纪录的是文件的名字&#xff0c;索引节点指针&#xff0c;目录项是由内核维护的一个数据结构&#xff0c;存在内存中。 Linux命令 (1) Linux Top命令参数详…

东北买房除了房子便宜外,还可能省下数十万,给孩子美好未来

由于鹤岗的影响&#xff0c;如今人们纷纷在全国寻找实惠房子&#xff0c;不过对于购房者来说&#xff0c;其实在东北买房除了房子便宜之外&#xff0c;还有额外的好处&#xff0c;这是其他省份仅有便宜房子一个条件比不上的。 对于如今的大众来说&#xff0c;除了买房实现人生的…

【Python】按格式输出指定内容至新的Excel表中

优化之前写的文档更新工具&#xff0c;输出指定列的数据到公式表中&#xff0c;且确保数值单元格不会被识别为文本&#xff0c;导致Excel文档数值计算公式失效 ExcelTool.py import os import pandas as pd from openpyxl import load_workbook import json### Excel表指定shee…

论文《Improving your graph neural networks:A High-Frequency Booster》笔记

【CLAR 2022 ICDMW】作者指出&#xff0c;现有的GNN模型主要关注于消息传递机制&#xff0c;但这些模型往往受限于低通滤波器的局限&#xff0c;导致在多层堆叠时性能下降。为了解决这个问题&#xff0c;论文提出了一种新的正则化方法&#xff0c;称为补全拉普拉斯正则化&#…

PP强酸强碱氮气柜和普通氮气柜的区别及共同点

PP强酸强碱氮气柜通常采用聚丙烯&#xff08;PP&#xff09;材料制成&#xff0c;聚丙烯是一种耐腐蚀性强的塑料材质&#xff0c;能有效抵抗强酸、强碱、盐溶液等腐蚀性物质的侵蚀&#xff0c;不易老化&#xff0c;使用寿命长。因其优秀的化学稳定性和耐腐蚀性&#xff0c;特别…

2024第三届大学生算法大赛 真题训练一 解题报告 | 珂学家

前言 题解 这是第三届大学生算法大赛(第二届为清华社杯)的赛前练习赛一. 这是上界比赛的体验报告: 2023第二届“清华社杯”大学生算法大赛 解题报告(流水账版) | 珂学家&#xff0c;个人还是非常推荐这个比赛。 难度分布&#xff1a;4 easy/4 mid-hard/2 hard 赛前练习赛一…

15、Django Admin添加自定义字段功能

修改模型类HeroAdmin admin.register(Hero) class HeroAdmin(admin.ModelAdmin):change_list_template "entities/heroes_changelist.html"... # 此处原代码不动&#xff0c;只增加此前后代码def get_urls(self):urls super().get_urls()my_urls [path(immort…

Linux【2】文件目录-ls进阶

目录 ls 组合使用&#xff1a;ls -lha​编辑 ls 通配符 ls .是隐藏文件 ls -a可以显示所有文件包括隐藏文件 ls- l列表形式&#xff0c;详细信息 ls -l -h 大小更详细 组合使用&#xff1a;ls -lha ls 通配符 *任意长度 &#xff1f;一个字符 带扩展名 可选from…

开源 AI 智能名片 S2B2C 商城小程序在社区团购中的应用与价值

摘要&#xff1a;本文探讨了开源 AI 智能名片 S2B2C 商城小程序在社区团购中的重要作用。社区团购的团长角色多元&#xff0c;包括小区店主、水站与快递站站长、宝妈等&#xff0c;其用户基础广泛。优秀团长的专业引导和良好服务至关重要&#xff0c;而开源 AI 智能名片 S2B2C …

Open3D 曲率下采样

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 三、实现效果 3.1原始点云 3.2曲率下采样后点云 Open3D点云算法汇总及实战案例汇总的目录地址&#xff1a; Open3D点云算法与点云深度学习案例汇总&#xff08;长期更新&#xff09;-CSDN博客 一、概述 曲…

R3 天气预测

天气预测 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 这周学习对天气预测的数据分析与模型训练&#xff0c;创建一个用于预测未来是否下雨的机器学习模型。 数据导入与预处理 首先&#xff0c;我们从CS…

springboot中会话技术方案cookie/session/jwt

会话跟踪 - 传统方案 cookie http协议支持的技术缺点 移动端app中不支持不安全&#xff0c;用户可以自己禁用cookiecookie不能跨域 session 存储在服务端&#xff0c;安全缺点 服务端集群的场景下&#xff0c;无法使用sessioncookie的缺点 会话跟踪 - 现代方案 jwt令牌 优…

华为云征文|华为云Flexus X实例部署k3s与kuboard图形化管理工具

华为云征文&#xff5c;华为云Flexus X实例部署k3s与kuboard图形化管理工具 什么是华为云Flexus X实例 华为云Flexus X实例云服务是新一代开箱即用、体验跃级、面向中小企业和开发者打造的高品价比云服务产品。Flexus云服务器X实例是新一代面向中小企业和开发者打造的柔性算力…

Linux服务器CPU和IO的监控利器-iostat简介

目录 一.下载方式 1.1Debian和Ubuntu系统的的下载方式 1.2Centos&#xff0c;RHEL和Fedoar系统的下载方式 二.基本用法说明 三.范例 3.1显示所有设备的负载情况 3.2每隔4秒显示所有设备的负载情况 3.2.1定时不定次显示所有信息 3.2.2定时定次显示所有信息 3.3显示磁盘…

使用AI写WebSocket知识是一种怎么样的体验?

一、WebSocket基础知识 1. WebSocket概念 1.1 为什么会出现WebSocket 一般的Http请求我们只有主动去请求接口&#xff0c;才能获取到服务器的数据。例如前后端分离的开发场景&#xff0c;自嘲为切图仔的前端大佬找你要一个配置信息的接口&#xff0c;我们后端开发三下两下开…