# Vendor Dep > Extract a npm dependency into the shared vendor bundle - Skill: `liriliri/vendor-dep` (Agent Skill) - Install (CLI): `npx skillmds@latest add liriliri/vendor-dep` - Raw SKILL.md: https://api.skillmd.com/api/skills/liriliri/vendor-dep/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: liriliri (https://skillmd.com/u/liriliri) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/liriliri/vendor-dep --- # Vendor Dep Extract a plugin's npm dependency into the shared `vendor/` bundle so it can be reused across plugins. ## Arguments - `package-name`: the npm package name (e.g. `html-to-image`) - `global-camel-name`: camelCase name for `globalThis` and IIFE export (e.g. `htmlToImage`) - `plugin-name`: one or more plugin folder names that use this dependency (e.g. `tinker-code-image tinker-photo-collage`) The vendor entry file name and build mode/script name are derived from `global-camel-name` lowercased (e.g. `htmltoimage`). ## Steps ### 1. Derive names - `lowerName` = `global-camel-name` lowercased (e.g. `htmlToImage` → `htmltoimage`) - `pluginVendorName` = `PluginVendor` + PascalCase of `global-camel-name` (e.g. `PluginVendorHtmlToImage`) ### 2. Create vendor entry file First check how the plugin imports the package: - **Named exports** (`import { foo } from '...'` or `import * as foo from '...'`): use `import *` - **Default export** (`import Foo from '...'`): use default import Create `vendor/.ts`: **Named exports:** ```ts import * as from '' import { expose } from './util' expose('', ) export { } ``` **Default export:** ```ts import from '' import { expose } from './util' expose('', ) export default ``` ### 3. Update `vendor/vite.config.ts` **Add to `globals` map:** ```ts '': '', ``` **Add build target** (before the final `return createConfig('react', ...)`): ```ts if (target === '') { return createConfig('', '') } ``` ### 4. Update `vendor/package.json` **Add to `devDependencies`:** ```json "": "" ``` Use the same version string currently in the plugin's `package.json`. Renderer libraries must always be installed as `devDependencies`, never `dependencies`. **Add build script:** ```json "build:": "vite build --config vite.config.ts --mode " ``` **Append to `build` script chain:** ``` && npm run build: ``` ### 5. Remove from each plugin's `package.json` For each ``, remove `` from `devDependencies`. If `devDependencies` becomes empty, keep the key with an empty object `{}`. ### 6. Add vendor script to each plugin's `index.html` For each ``, add the following ` ```