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

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.mzph.cn/pingmian/53345.shtml

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

相关文章

How can I load the openai api configuration through js in html?

题意:怎样在HTML中通过JavaScript加载OpenAI API配置 问题背景: I am trying to send a request through js in my html so that openai analyzes it and sends a response, but if in the js I put the following: 我正在尝试通过HTML中的JavaScript发…

2024前端面试题分享

前言 最近忙着面试很久没有更新文章了,分享一下我收集的前端面经,当然题目仅供参考(乞求秋招offer) 面试题 响应式布局 ---根据用户的的窗口变化而变化的布局方式 react 的hooks ---官方提供的钩子和自定义的钩子&#xf…

嵌入式面试经典30问:二

1. 嵌入式系统中,如何选择合适的微控制器或微处理器? 在嵌入式系统中选择合适的微控制器(MCU)或微处理器(MPU)时,需要考虑多个因素以确保所选组件能够满足项目的具体需求。以下是一些关键步骤和…

Qt/C++ 个人开源项目#串口助手(源码与发布链接)

一、项目概述 该串口助手工具基于Qt/C开发,专为简化串口通信调试与开发而设计,适合新手快速上手。工具具有直观的用户界面和丰富的功能,旨在帮助用户与串口设备建立可靠通信,便于调试、数据传输和分析。 二、主要功能 波特率&a…

【信创建设】信息系统信创建设整体技方案(word原件完整版)

信创,即“信息技术应用创新”。我国自主信息产业聚焦信息技术应用创新,旨在通过对IT硬件、软件等各个环节的重构,基于我国自有IT底层架构和标准,形成自有开放生态,从根本上解决本质安全问题,实现信息技术可…

多款式随身WiFi如何挑选,USB随身WiFi、无线电池随身WiFi、充电宝随身WiFi哪个好?优缺点分析!

市面上的随身WiFi款式多样琳琅满目,最具代表性的就是USB插电款、无线款和充电宝款。今天就来用一篇文章分析一下这三种款式的优缺点。 USB插电款 优点:便宜,无需充电,在有电源的地方可以随时随地插电使用,比如中兴的U…

MATLAB基础应用精讲-【数模应用】正交实验

目录 前言 算法原理 什么是正交实验 在测试中的作用 使用正交试验法的原因 什么是正交试验法? 正交实验基本设计思想 正交表 正交实验的操作方法 正交实验结果分析方法 SPSSAU 正交实验案例 1、背景 2、理论 3、操作 5、文字分析 6、剖析 疑难解惑 正交表和…

Spring Boot 部署方案!打包 + Shell 脚本详解

本篇和大家分享的是springboot打包并结合shell脚本命令部署,重点在分享一个shell程序启动工具,希望能便利工作; profiles指定不同环境的配置 maven-assembly-plugin打发布压缩包 分享shenniu_publish.sh程序启动工具 linux上使用shenniu_p…

python进阶篇-day07-高级语法与正则

day07-python其他高级语法 一. with(上下文管理) 介绍 概述 一个类只要实现了__ enter __ () 和 __ exit __ ()方法, 这个类就是一个上下文管理器类, 该类的对象 上下文管理器对象 目的 节约资源, 提高效率, 避免手动释放资源, 且出bug的时候, 也会自动尝试释放资源 特点…

【Centos】绕开报错ModuleNotFoundError: No module named ‘dnf‘

问题原因&#xff1a; 安装python3.9后不能使用yum Traceback (most recent call last):File "/usr/bin/yum", line 57, in <module>from dnf.cli import main ModuleNotFoundError: No module named dnf绕开yum解决方法&#xff1a; 直接下载相关依赖包 htt…

怎样将手机屏幕(远程)投屏到家里的大电视上?

我不住家里&#xff0c;前几次回去都会替老爸老妈清理手机。这两个星期没空回去&#xff0c;老爸吐槽手机用几天就又卡了&#xff0c;其实就是清理一些手机缓存的问题。 我说我远程控制他的手机&#xff0c;给他清理一下。他一听“控制”就不喜欢&#xff0c;说我大了&#xf…

软件测试面试从哪方面面试?

一、面试基础题 简述测试流程: 什么是软件测试&#xff1f;软件测试的目的与原则 问&#xff1a;软件生存周期及其模型是什么&#xff1f; 什么是软件质量&#xff1f; 自动化测试脚本开发的主要步骤: 目前主要的测试用例设计方法是什么&#xff1f; 常见的测试用例设计…

【Python知识宝库】文件操作:读写文件的最佳实践

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言一、文件读取1. 使用open函数2. 逐行读取3. 使用readlines和readline 二、文件写入1. 写入文本2. 追加内容3. 写入…

使用shell脚本安装mysql8,进行主从备份配置

思路 在3台主机上安装mysql进行主从备份配置 使用rpm包yum安装mysql 首先&#xff0c;我们要准备好安装文件&#xff0c;首先下载rpm包 wget -P "/opt/" https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm 然后执行安装&#xff08;默认已配置…

HMI设计:嵌入式设备和电脑的差异化,工控领域首选。

嵌入式设备属于专机专用&#xff0c;电脑是通用&#xff0c;从性能、用途、特殊能力、成本、通信上嵌入式设备完全优于电脑&#xff0c;是工控领域的首选。 嵌入式设备和电脑在很多方面有着显著的差异&#xff0c;主要体现在以下几个方面&#xff1a; 1. 设计用途&#xff1a…

go 开发小技巧

一、简介 本篇文章会介绍go 开发小技巧。 二、go 开发技巧 2.1 Semaphore type Semaphore chan struct{}func NewSemaphore(maxCount int) Semaphore {return make(chan struct{}, maxCount) }func (s Semaphore) Acquire() {s <- struct{}{} }func (s Semaphore) tryAcq…

在js渲染的dom中的事件中传递对象

在某些情况下&#xff0c;可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中&#xff0c;可以将对象数据序列化为 JSON 字符串&#xff0c;存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据&#xff1a; <!DOCTYPE html> <html lang"en&qu…

linux高级学习9

24.9.6学习目录 一.共享内存1.共享内存的API 一.共享内存 特点&#xff1a; 其在进程间共享数据的方法中是最快的要注意对给定存储区访问时进行互斥 1.共享内存的API &#xff08;1&#xff09;获取共享内存标识符 在shell中使用 ipcs -m进行查看共享内存 ipcrm -m shmid删…

P1546 [USACO3.1] 最短网络 Agri-Net

[题目通道]([USACO3.1] 最短网络 Agri-Net - 洛谷) #include<bits/stdc.h> #define int long long using namespace std; const int N1e6100; struct edge{int u,v,w; }e[N*30]; bool cmp(edge a,edge b){return a.w<b.w; } int a,b,c,n,m,fa[N],cnt0,ans0; int fin…

目标检测-YOLOv10

YOLOv10 是 YOLO 系列的最新版本&#xff0c;进一步推动了目标检测技术的发展。它在前代&#xff08;YOLOv9&#xff09;的基础上进行了更多优化和改进&#xff0c;使得模型在复杂场景、实时性以及精度方面取得了更高的突破。YOLOv10 将高效的架构设计与新颖的技术结合&#xf…