监控平台之rollup打包

设计思路

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.rhkb.cn/news/415863.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全服务基础Windows--第12节-域与活动目录

工作组 在Windows环境中配置⼯作组相对简单&#xff0c;适合⼩型⽹络环境&#xff0c;如家庭或⼩型办公室⽹络。⼯作组通过简单的⽹络共享和本地管理来实现资源共享&#xff0c;⽽不依赖于中央控制的服务器。 ● 定义&#xff1a;⼯作组是⼀种对等⽹络模型&#xff0c;在这种…

【鸿蒙开发从0到1 day05】

一. 清除浮动 1.当外面的大盒子,仅仅只设置了宽度,里面的子盒子为了行排序, 设置了浮动,以至于小盒子脱标,大盒子的高度为0,这个时候就会导致大盒子下面的盒子会跑上去 解决办法方法一:给父盒子添加overflow:hidden,这个就是如果子盒子有溢出,,溢出部分会隐藏方法二:在子盒子的…

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

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

计算机网络-VRRP切换与回切过程

前面我们学习了VRRP选举机制&#xff0c;根据VRRP优先级与IP地址确定主设备与备份设备&#xff0c;这里继续进行主备切换与主备回切以及VRRP抢占模式的学习。 一、VRRP主备切换 主备选举时根据优先级选择主设备&#xff0c;状态切换为Master状态&#xff0c;那当什么时候会切换…

HTTPS 协议“加密和解密”详细介绍

目录 一、加密 二、HTTPS的工作过程 2.1 引入对称加密 2.2 引入非对称加密 2.3 中间人攻击 2.4 引入证书 2.5 理解数据签名 2.6 通过证书解决中间人攻击 三、总结 HTTPS 是一个应用层协议&#xff0c;是在 HTTP 协议的基础上引入了一个加密层。 一、加密 加密就是把明文&#x…

Golang环境安装、配置详细

Windows下安装Go开发环境 点我下载 Windows配置Go环境变量 出现工具install失败时&#xff0c;切换其它代理 # 1. 七牛 CDN go env -w GOPROXYhttps://goproxy.cn,direct# 2. 阿里云 go env -w GOPROXYhttps://mirrors.aliyun.com/goproxy/,direct# 3. 官方 go env -w GOP…

【wsl2】从C盘迁移到G盘

参考大神 C盘的ubuntu22.04 非常大&#xff0c;高达30g 迁移后就只有几百M了&#xff1a; 右键有一个move没有敢尝试 迁移过程 Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improveme…

Xcode插件开发

Xcode插件开发 文章目录 Xcode插件开发一、插件开发流程创建插件Extension文件介绍文件说明 二、插件使用安装说明 一、插件开发流程 创建插件的过程并不复杂&#xff0c;只是官方教程&#xff0c;过于简单&#xff0c;所以这里补充下创建细节 创建插件 环境&#xff1a;Xco…

vue在生产环境和测试环境去掉 console 打印日志 只保留 “error“、 “warn“

vue在生产环境和测试环境去掉 console 打印日志 只保留 “error”、 “warn” 文章目录 vue在生产环境和测试环境去掉 console 打印日志 只保留 "error"、 "warn"一、安装插件二、babel.config.js配置 一、安装插件 npm install babel-plugin-transform-r…

C++11中的function和bind

目录 1.一个引例 2.function 什么是function&#xff1f; function模板原型 function的使用 使用示例代码 使用function解决引例中的问题 3.bind 什么是bind&#xff1f; 如何理解bind&#xff1f; bind的使用 4.function和bind总结 1.一个引例 看下面这一段代码…

仿华为车机UI--图标从Workspace拖动到Hotseat同时保留图标在原来位置

基于Android13 Launcher3,原生系统如果把图标从Workspace拖动到Hotseat里则Workspace就没有了&#xff0c;需求是执行拖拽动作后&#xff0c;图标同时保留在原位置。 实现效果如下&#xff1a; 实现思路&#xff1a; 1.如果在workspace中拖动&#xff0c;则保留原来“改变图标…

前端脚手架,自动创建远程仓库并推送

包含命令行选择和输入配置&#xff0c;远程仓库拉取模板&#xff0c;根据配置将代码注入模板框架的代码中&#xff0c;自动创建远程仓库&#xff0c;初始化git并提交至远程仓库&#xff0c;方便项目开发&#xff0c;简化流程。 目录结构 创建一个bin文件夹&#xff0c;添加ind…

云计算之存储

目录 一、产品介绍 1.1 对象存储oss 1.2 特点 二、产品技术背景 三、产品架构及功能 四、常见问题及排查思路 4.1 两个bucket目录文件如何快速复制&#xff1f; 4.2 oss里的目录如何删除&#xff1f; 4.3 能否统计oss一个目录的大小 4.4 异常诊断 - 上传下载速度慢 4…

CentOS 7安装Docker详细步骤-无坑-丝滑-顺畅

一&#xff0c;安装软件包 yum install -y yum-utils device-mapper-persistent-data lvm2二&#xff0c;更换yum源为阿里源&#xff1a; yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 三&#xff0c;查看docker版本&…

uniapp 自定义微信小程序 tabBar 导航栏

背景 做了一个校园招聘类小程序&#xff0c;使用 uniapp vue3 uview-plus pinia 构建&#xff0c;这个小程序要实现多角色登录&#xff0c;根据权限动态切换 tab 栏文字、图标。 使用pages.json中配置tabBar无法根据角色动态配置 tabBar&#xff0c;因此自定义tabBar&…

交换机自动化备份配置(H3C_无人值守)

介绍&#xff1a; 在日常运维过程中&#xff0c;需要定时备份设备的配置&#xff0c;在设备数量过于庞大的情况下&#xff0c;对我们的运维工作会造成极大地不便&#xff0c;通过python自动化能够完美解决人工手动保存设备配置的问题。而且自动化运维在未来也一定是大势所趋&a…

Spring框架——springweb(一篇包会)

目录 一、Springweb概述 1.SpringWeb特点 2.SpringWeb组件 3.SpringWeb运行流程 二、搭建Springweb 1.导入框架所需的包 2.配置 DispatcherServlet 3.开启SpringWeb注解 4.处理器类搭建 5.请求处理 &#xff08;1&#xff09;接收请求RequestMapping &#xff08;2&…

2.1概率统计的世界

欢迎来到概率统计的世界&#xff01;在量化交易中&#xff0c;概率统计是至关重要的工具。通过理解概率&#xff0c;我们可以用数学的方法来描述市场行为&#xff0c;预测未来走势&#xff0c;并制定交易策略。让我们一起从基础概念开始&#xff0c;逐步深入&#xff0c;揭开概…

vmware中克隆过来的linux节点无system eth0

问题现象 使用vmware虚拟机的克隆功能后&#xff0c;找不到system eth0 解决办法 编辑/etc/udev/rules.d/70-persistent-net.rules文件 可以看到&#xff0c;eth0&#xff0c;是克隆前机器的网卡&#xff0c;eth1是克隆后机器生成的网卡&#xff0c;所以把NAME"eth0&q…

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、设…