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 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值