Utilice el paquete acumulativo para empaquetar la biblioteca de terceros @sentry/browser en formato umd

fondo

Recientemente, el monitoreo centinela se introdujo en el paquete de entradas múltiples de proyectos antiguos. Como no quería agregar lógica relacionada con centinela a cada entrada, finalmente introduje centinela a través de la etiqueta de script en el archivo de plantilla unificado HTML e inicialicé la operación.
Para garantizar que se pueda utilizar el archivo centinela introducido por la etiqueta de secuencia de comandos. Es necesario asegurarse de que Sentry utilice el método del módulo umd.

funcionar

准备 一个 空目录 初始化 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

Insertar descripción de la imagen aquí
Insertar descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_45485922/article/details/132298693
Recomendado
Clasificación