从文章截取的上传npm插件内容
https://mp.weixin.qq.com/s/GrFTU6EoEo7CgifaW32wLg
3. 工程化构建配置
既然是 SDK，最好的分发方式当然是发布到 NPM。这样其他项目只需要一行命令就能接入你的前端错误监控系统。
这里我们选择「Rollup」对代码进行打包，因为它比 Webpack 更适合打包库（Library），生成的代码更简洁。
3.1 package 配置 (package.json)
package.json不仅仅是依赖管理，它还定义了你的包如何被外部使用。配置不当会导致用户引入报错或无法获得代码提示。
{ "name": "performance-sdk", "version": "1.0.0", "description": "A lightweight performance monitoring SDK", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "browser": "dist/index.umd.js", "type": "module", "scripts": { "build": "rollup -c", "dev": "rollup -c -w" }, "keywords": ["performance", "monitor", "sdk"], "license": "MIT", "files": ["dist"], "devDependencies": { "rollup": "^4.9.0", "@rollup/plugin-typescript": "^11.1.0", "@rollup/plugin-terser": "^0.4.0", "typescript": "^5.3.0", "tslib": "^2.6.0" } }「💡 关键字段解读：」
「
name」: 包的“身份证号”。在 NPM 全球范围内必须唯一，发布前记得先去搜一下有没有重名。「入口文件“三剑客”」（决定了别人怎么引用你的包）：
「
main」:「CommonJS 入口」。给 Node.js 环境或老旧构建工具（如 Webpack 4）使用的。「
module」:「ESM 入口」。给现代构建工具（Vite, Webpack 5）使用的。支持 Tree Shaking（摇树优化），能减小体积。「
browser」:「UMD 入口」。给浏览器直接通过<script>标签引入使用的（如 CDN）。
「
files」:「发布白名单」。指定npm publish时只上传哪些文件（这里我们只传编译后的dist目录）。源码、测试代码等不需要发上去，以减小包体积。
3.2 TypeScript 配置 (tsconfig.json)
我们需要配置 TypeScript 如何编译代码，并生成类型声明文件（.d.ts），这对使用 TS 的用户非常友好。
{ "compilerOptions": { "target": "es5", // 编译成 ES5，兼容旧浏览器 "module": "esnext", // 保留 ES 模块语法，交给 Rollup 处理 "declaration": true, // 生成 .d.ts 类型文件 (关键！) "declarationDir": "./dist", // 类型文件输出目录 "strict": true, // 开启严格模式，代码更健壮 "moduleResolution": "node" // 按 Node 方式解析模块 }, "include": ["src/**/*"] // 编译 src 下的所有文件 }3.3 Rollup 打包配置 (rollup.config.js)
为了兼容各种使用场景，我们配置 Rollup 输出三种格式：
「ESM (
.esm.js)」: 给现代构建工具（Vite, Webpack）使用，支持 Tree Shaking。「CJS (
.cjs.js)」: 给 Node.js 或旧版工具使用。「UMD (
.umd.js)」: 可以直接在浏览器通过<script>标签引入，会挂载全局变量。
import typescript from '@rollup/plugin-typescript'; import terser from '@rollup/plugin-terser'; export default { input: 'src/index.ts', output: [ { file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true }, { file: 'dist/index.esm.js', format: 'es', sourcemap: true }, { file: 'dist/index.umd.js', format: 'umd', name: 'PerformanceSDK', sourcemap: true, plugins: [terser()], }, ], plugins: [ typescript({ tsconfig: './tsconfig.json', declaration: true, declarationDir: 'dist', }), ], };4. 发布到 NPM (保姆级教程)
4.1 准备工作
「注册账号」：去 npmjs.com 注册一个账号（记得验证邮箱，否则无法发布）。
「检查包名」：在 NPM 搜一下你的
package.json里的name，确保没有被占用。如果不幸重名，改个独特的名字，比如performance-sdk-vip。
4.2 终端操作三步走
打开终端（Terminal），在项目根目录下操作：
「第一步：登录 NPM」
npm login输入命令后按回车，浏览器会弹出登录页面。
或者在终端根据提示输入用户名、密码和邮箱验证码。
登录成功后会显示
Logged in as <your-username>.注意：如果你之前切换过淘宝源，发布时必须切回官方源：
npm config set registry https://registry.npmjs.org/
「第二步：打包代码」
确保dist目录是最新的，不要发布空代码。
npm run build「第三步：正式发布」
npm publish --access public--access public参数用于确保发布的包是公开的（特别是当包名带@前缀时）。看到
+ performance-sdk-vip@1.0.0字样，恭喜你，发布成功！
现在，全世界的开发者都可以通过npm install performance-sdk-vip来使用你的作品了！
5. 如何使用
SDK 发布后，支持多种引入方式，适配各种开发场景。
NPM + ES Modules（推荐）
npm install performance-sdkimport PerformanceMonitor from 'performance-sdk'; const monitor = new PerformanceMonitor({ /* 可选：log, sampleRate, reportUrl */ }); monitor.init();
CDN 直接引入（UMD）
<script src="https://unpkg.com/performance-sdk@x.x.x/dist/index.umd.js"></script> <script> const monitor = new PerformanceSDK.PerformanceMonitor({ /* 可选配置 */ }); monitor.init(); </script>
)
