Créer et publier une librairie Vue 3 — composant de patch notes avec mode Vue, composable, mode standalone CDN, personnalisation CSS et publication npm.
Le build produit deux artefacts depuis un seul codebase : une librairie Vue légère (sans Vue bundlé) et un widget standalone complet (Vue inclus).
export default defineConfig(({ mode }) => {
const isStandalone = mode === 'standalone'
return {
plugins: [vue(), tailwindcss()],
build: {
lib: {
entry: resolve(__dirname, isStandalone ? 'src/standalone.ts' : 'src/index.ts'),
name: 'OpenPatch',
formats: isStandalone ? ['es', 'umd'] : ['es'],
fileName: (format) => isStandalone ? `openpatch.${format}.js` : `index.${format}.js`
},
rollupOptions: {
external: isStandalone ? [] : ['vue'],
},
outDir: 'dist',
emptyOutDir: !isStandalone, // ne pas écraser le premier build
}
}
}){
"scripts": {
"dev": "vite",
"build": "npm run build:lib && npm run build:standalone",
"build:lib": "vite build",
"build:standalone": "vite build --mode standalone"
}
}npm run build enchaîne les deux builds. emptyOutDir: !isStandalone évite que le build standalone efface les fichiers du build lib.
dist/
├── index.es.js ← librairie Vue (sans Vue bundlé) — 8 kB
├── openpatch.es.js ← standalone ES module (Vue inclus) — 123 kB
├── openpatch.umd.js ← standalone UMD (Vue inclus) — 77 kB
├── open-patch.css ← styles compilés — 21 kB
└── index.d.ts ← types TypeScriptLe renommage de style.css → open-patch.css se fait dans rollupOptions :
output: {
assetFileNames: (assetInfo) => {
if (assetInfo.names?.[0] === 'style.css') return 'open-patch.css'
return assetInfo.names?.[0] || 'asset'
}
}# S'authentifier
npm login
# Publier (utilise les "files" de package.json pour savoir quoi uploader)
npm publish"files": ["dist"] dans package.json garantit que seul le dossier dist est publié — pas le code source, pas node_modules.
name: Deploy
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./distChaque push sur main déclenche un build et publie dist/ sur GitHub Pages. Les fichiers standalone (openpatch.es.js, open-patch.css) sont ainsi accessibles depuis n'importe quelle page HTML via CDN.
Avant chaque publication, incrémenter la version dans package.json :
npm version patch # 1.0.0 → 1.0.1 (bugfix)
npm version minor # 1.0.0 → 1.1.0 (nouvelle feature)
npm version major # 1.0.0 → 2.0.0 (breaking change)Ces commandes mettent à jour package.json et créent un tag git automatiquement.