核心内容摘要
雏田3502343502：连接你我，点亮生活的无限可能
从文章截取的上传npm插件内容https://mp.weixin.qq.com/s/GrFTU6EoEo7CgifaW32wLg
工程化构建配置既然是 SDK最好的分发方式当然是发布到 NPM。
这样其他项目只需要一行命令就能接入你的前端错误监控系统。
这里我们选择「Rollup」对代码进行打包因为它比 Webpack 更适合打包库Library生成的代码更简洁。
1 package 配置 (package.json)package.json不仅仅是依赖管理它还定义了你的包如何被外部使用。
配置不当会导致用户引入报错或无法获得代码提示。
{ name: performance-sdk, version:
1.
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.
0, rollup/plugin-typescript: ^
11.
0, rollup/plugin-terser: ^
0.
0, typescript: ^
5.
0, tslib: ^
2.
0 } }「 关键字段解读」「name」: 包的“身份证号”。
在 NPM 全球范围内必须唯一发布前记得先去搜一下有没有重名。
「入口文件“三剑客”」决定了别人怎么引用你的包「main」:「CommonJS 入口」。
给 Node.js 环境或老旧构建工具如 Webpack 4使用的。
「module」:「ESM 入口」。
给现代构建工具Vite, Webpack 5使用的。
支持 Tree Shaking摇树优化能减小体积。
「browser」:「UMD 入口」。
给浏览器直接通过script标签引入使用的如 CDN。
「files」:「发布白名单」。
指定npm publish时只上传哪些文件这里我们只传编译后的dist目录。
源码、测试代码等不需要发上去以减小包体积。
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 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, }), ], };
发布到 NPM (保姆级教程)
1 准备工作「注册账号」去 npmjs.com 注册一个账号记得验证邮箱否则无法发布。
「检查包名」在 NPM 搜一下你的package.json里的name确保没有被占用。
如果不幸重名改个独特的名字比如performance-sdk-vip。
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字样恭喜你发布成功现在全世界的开发者都可以通过npm install performance-sdk-vip来使用你的作品了
如何使用SDK 发布后支持多种引入方式适配各种开发场景。
NPM ES Modules推荐npm install performance-sdkimport PerformanceMonitor from performance-sdk; const monitor new PerformanceMonitor({ /* 可选log, sampleRate, reportUrl */ }); monitor.init();CDN 直接引入UMDscript srchttps://unpkg.com/performance-sdkx.x.x/dist/index.umd.js/script script const monitor new PerformanceSDK.PerformanceMonitor({ /* 可选配置 */ }); monitor.init(); /script