背景
最近 老项目 多入口打包 引入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