利用rollup打包 第三方库 @sentry/browser 为 umd 格式

背景

最近 老项目 多入口打包 引入sentry监控 ,由于不想 在各个入口 都去加sentry 相关逻辑,最后 在 统一的模版文件 html 中 通过 script 标签 引入sentry ,并 初始化操作。
要想保证 script 标签 引入 sentry文件能使用。 需要 保证sentry 使用 umd 模块 方式。

操作

准备 一个 空目录 初始化 npm 环境
npm init -y

下载 rollup  相关打包插件 
// package.json
{
    
    
  "name": "sentry",
  "version": "1.0.0",
  "description": "",
  "main": "bundel.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    
    
    "rollup": "^2.79.1",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.2"
  }
}

//再下载 @sentry/browser 

npm i  @sentry/browser 

// 编写一个 打包入口 文件 bundle.js
import * as Sentry from '@sentry/browser';

export default Sentry	

// 再准备一个rollup 打包配置 文件 	config.mjs
import  nodeResolve  from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import {
    
     uglify } from 'rollup-plugin-uglify';

export default {
    
    
  input: './bundle.js', // 替换为实际入口文件的路径
  output: {
    
    
    file: 'dist/sentry.umd.js', // 替换为输出的 UMD 文件路径
    format: 'umd',
    name: 'Sentry', // 替换为您希望在全局中访问库的名称
  },
  plugins: [
    nodeResolve({
    
    
      browser: true,
    }),
    commonjs(),
    uglify()
  ],
  external: [], // 如果有其他外部依赖项,请添加到该数组中
};


// 最后 执行
rollup -c config.mjs

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45485922/article/details/132298693