插件发布到npm

从文章截取的上传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 输出三种格式：

1. 「ESM (.esm.js)」: 给现代构建工具（Vite, Webpack）使用，支持 Tree Shaking。

2. 「CJS (.cjs.js)」: 给 Node.js 或旧版工具使用。

3. 「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 准备工作

1. 「注册账号」：去 npmjs.com 注册一个账号（记得验证邮箱，否则无法发布）。

2. 「检查包名」：在 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-sdk

• import 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>