fetch-event-source 如何通过script全局引入

news/2024/9/18 21:01:37/ 标签: javascript, 前端

fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢?需要加上type=module。今天介绍另一种方法

下载源码文件: https://github.com/Azure/fetch-event-source.git

安装:

npm install --save-dev webpack webpack-cli ts-loader typescript

然后在根目录创还能webpack.config.js :

const path = require('path');module.exports = {entry: './src/index.ts',  // TypeScript 入口文件module: {rules: [{test: /\.ts$/,        // 匹配所有以 .ts 结尾的文件use: 'ts-loader',     // 使用 ts-loader 来处理这些文件exclude: /node_modules/}]},resolve: {extensions: ['.ts', '.js']  // 支持导入时省略 .ts 和 .js 后缀},output: {filename: 'fetchEventsource.js',      // 输出的打包文件名path: path.resolve(__dirname, 'dist'),  // 输出文件的路径library: 'SSE',       // 使输出的文件作为全局库在浏览器中使用libraryTarget: 'var',       // 输出为一个变量,适合在浏览器中通过 script 标签直接使用},mode: 'production'  // 生产环境模式,自动优化打包
};

执行:npx webpack 

最后生成一个dist目录中的文件bundle.js 


http://www.ppmy.cn/news/1525517.html

相关文章

力扣100题——杂题

回溯——分割回文串 题目 131. 分割回文串 - 力扣(LeetCode) 思路 问题拆解 回文串定义:回文串是指从前往后和从后往前读都是相同的字符串。例如,"aba" 和 "racecar" 都是回文串。 递归 回溯思想&#…

网络学习-eNSP配置NAT

NAT实现内网和外网互通 #给路由器接口设置IP地址模拟实验环境 <Huawei>system-view Enter system view, return user view with CtrlZ. [Huawei]undo info-center enable Info: Information center is disabled. [Huawei]interface gigabitethernet 0/0/0 [Huawei-Gigabi…

HTML中的文字与分区标记

1.font标记&#xff1a;用来设置文字的字体&#xff0c;大小&#xff0c;颜色&#xff0c;等属性 <!--font:font标记用来设置字体大小颜色属性size:设置字号&#xff0c;默认是3号&#xff0c;1表示4号&#xff0c;-1表示2号&#xff0c;取值范围是[1,7]或[-7,-1]color:设置…

websim.ai 体验过程+感受

体验 websim.ai 后感觉网站更倾向于客户提需求或者满足客户需求的可视化页面阶段&#xff0c;比较像设计界面。就是一直命令AI添加功能&#xff0c;然后它绘图。导出的代码是单个HTML文件&#xff0c;用前端三件套写的。 体验过程 ① Create a relationship diagram between …

chrome浏览器如何设置自动播放音视频

使用场景&#xff1a; 有些场景需要打开页面后&#xff0c;自动播放视频或者视频流&#xff0c;这时候发现无法播放&#xff0c;打开浏览器控制台发现有下面的错误提示&#xff1a;NotAllowedError: play() failed because the user didnt interact with the document first 。…

金融壹账通:智能面审解决方案“大显身手”

深度伪造技术Deepfake,是“Deep Machine Learning(深度机器学习)”与“Fake Photo(假照片)”两个词的合成词,主要指用AI深度学习的技术,合成某个人的图片或视频、甚至声音,最常见的便是AI换脸,此外还包括语音模拟、人脸合成、视频生成等。如今,AI换脸与“假人骗贷”正成为相当常…

文件误删危机应对:数据恢复全解析

文件误删&#xff1a;数字化时代的隐形挑战 在数字化的浪潮中&#xff0c;文件已成为我们工作、学习和生活中不可或缺的一部分。它们记录着我们的思想、成果与回忆&#xff0c;是连接现实与虚拟世界的桥梁。然而&#xff0c;这份便捷与高效背后&#xff0c;却隐藏着文件误删这…

SpringBoot + Vue + ElementUI 实现 el-table 分页功能详解

引言 在现代Web应用程序开发中&#xff0c;前后端分离架构越来越受欢迎。这种架构使得前端和后端开发可以并行进行&#xff0c;提高了开发效率。本文将详细讲解如何使用SpringBoot作为后端&#xff0c;Vue.js和ElementUI作为前端&#xff0c;实现一个带分页功能的数据表格&…

算法练习题16——leetcode73矩阵置零

题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。 解题思路 我们需要找出矩阵中哪些位置有 0&#xff0c;然后将这些位置所在的行和列上的所有元素都设为 0。 可以分为以下几个步骤&#xff1a; 扫描矩阵&…

基于less和scss 循环生成css

效果 一、less代码 复制代码 item-count: 12; // 生成多少个 .item 类.item-loop(n) when (n > 0) {.icon{n} {background: url(../../assets/images/menu/icon{n}.png) no-repeat;background-size: 100% 100%;}.item-loop(n - 1);}.item-loop(item-count);二、scss代码 f…

Autosar(Davinci) --- 创建一个S/R类型的port(下)

前言: 前面章节我们讲解了S/R类型的Port如何创建,这一章节,我们着重讲一下生成的代码,以及我们如何添加代码让这些门与灯之间的关系产生连接。 一、CtSaDoor.c 在【Rte.c】的【IO_TASK】中我们可以看到,反复的判断Rte_Ev_Cyclic_IO_Task_0_200ms这个条件是否成立,当200…

系统架构设计师【真题论文】: 论企业集成平台的技术与应用(包括解题思路和经典范文)

更多内容请见: 备考系统架构设计师-核心总结索引 文章目录 真题题目(2015年试题4)解题思路精品范文赏析摘要正文总结真题题目(2015年试题4) 题目:论企业集成平台的技术与应用 企业集成平台是一个支持复杂信息环境下信息系统开发、集成和协同运行的软件支撑环境。它基于各…

IOS Siri和快捷指令打开app

使用场景 需要Siri打开应用或者在自定义快捷指令打开应用&#xff0c;并携带内容进入应用。 1.创建Intents文件 1.1 依次点开File->New->File 1.2 搜索intent关键字找到 SiriKit Intent Definition File文件 1.3 找到刚才创建的Intent文件&#xff0c;点击然后New Inte…

服务器与个人计算机之间的区别

服务器和个人计算机作为人们日常生活中经常会用到的计算机系统&#xff0c;在功能与用途方面还是有着明显的区别的&#xff0c;今天小编就主要来为大家介绍一下服务器与个人计算机之间的区别有哪些&#xff1f; 个人计算机相对于服务器来说&#xff0c;更加注重与用户的体验感和…

C++11第四弹:包装器

&#x1f308;个人主页&#xff1a; 南桥几晴秋 &#x1f308;C专栏&#xff1a; 南桥谈C &#x1f308;C语言专栏&#xff1a; C语言学习系列 &#x1f308;Linux学习专栏&#xff1a; 南桥谈Linux &#x1f308;数据结构学习专栏&#xff1a; 数据结构杂谈 &#x1f308;数据…

企业数字化转型建设方案(数据中台、业务中台、AI中台)(可编辑的188页WORD)

引言&#xff1a;企业数字化转型是一个复杂而长期的过程&#xff0c;其核心在于通过数据中台、业务中台和AI中台的建设&#xff0c;推动企业实现全面的数字化升级。 方案介绍&#xff1a;企业数字化转型建设方案中的数据中台是企业数字化转型的核心基础设施&#xff0c;负责数…

MATLAB基础语法知识

环境的配置等等就不写了&#xff0c;网上还是有很多资源可以找&#xff0c;而且正版的要付费&#xff0c;我也是看的网上的搞定的。 一&#xff0c;初识MATLAB 1.1 MATLAB的优势 不需要过多了解各种数值计算方法的具体细节和计算公式&#xff0c;也不需要繁琐的底层编程。可…

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析&#xff1a; url中含有特殊字符 中文未编码 都有可能导致URL转换失败&#xff0c;所以需要对url编码处理 如下&#xff1a; guard let allowUrl webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时&a…

华为23年笔试题

消息传输 题目描述 在给定的 m x n (1 < m, n < 1000) 网格地图 grid 中&#xff0c;分布着一些信号塔&#xff0c;用于区域间通信。 每个单元格可以有以下三种状态&#xff1a; 值 0 代表空地&#xff0c;无法传递信号&#xff1b; 值 1 代表信号塔 A&#xff0c;…

Iceberg与SparkSQL查询操作整合

前言 spark操作iceberg之前先要配置spark catalogs,详情参考Iceberg与Spark整合环境配置。 Iceberg使用Apache Spark的DataSourceV2 API来实现数据源和catalog。 使用SQL查询 查询的时候表要按照:catalog.数据库.表名的格式 SELECT * FROM prod.db.table; -- catalog: p…