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 

你可能感兴趣的:(javascript,前端)