Creazione pacchetto npm

Descrizione

Documentazione su come modificare il package.json e il vite.config.js e sulla creazione del file index.js.

Struttura del Progetto

Prima di iniziare, assicurati di avere una struttura del progetto simile a questa:

my-package/
├── src/
│   └── index.js
├── package.json
├── vite.config.js
└── README.md

index.js

Creare un file index.js all’interno di ./src. Qui esporteremo i file che ci servono dal pacchetto:

import FileName from './FileName'; // Import del file

export { FileName } // Export del file da poter usare con il pacchetto

package.json

Nel file package.json vanno aggiunte nuove chiavi:

{
  "name": "nome-pacchetto",
  "version": "1.0.0",
  "private": false,
  "main": "dist/nome-pacchetto.cjs.js",
  "style": "dist/nome-pacchetto.css",
  "module": "dist/nome-pacchetto.esm.js",
  "exports": {
    ".": {
      "import": "./dist/nome-pacchetto.esm.js",
      "require": "./dist/nome-pacchetto.cjs.js"
    }
  },
  "files": [
    "dist",
    "README.md"
  ],
  "author": "Nome Autore",
  "license": "MIT",
  "description": "Descrizione del pacchetto",
  "scripts": {
    "build": "vite build",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {},
  "devDependencies": {
    "vite": "^3.0.0"
  }
}

Spiegazione delle voci del package.json

• name: Il nome del pacchetto.
• private: Se true, il pacchetto non potrà essere pubblicato su npm.
• version: La versione del pacchetto.
• main: Il file principale per il CommonJS (CJS).
• module: Il file che contiene il modulo ES (ESM).
• style: Il file CSS del progetto.
• exports: Definisce le modalità di importazione della libreria.
• files: Specifica quali file e cartelle includere nel pacchetto pubblicato.
• author: L’autore del pacchetto.
• license: La licenza del pacchetto (es. MIT).
• description: Una breve descrizione del pacchetto.
• scripts: Comandi npm per eseguire la build e preparare il pacchetto.

vite.config.js

Nel file vite.config.js aggiungere le configurazioni per creare un pacchetto:

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: './src/index.js',
      name: 'nome-libreria',
      fileName: (format) => `nome-libreria.${format}.js`,
      formats: ['esm', 'cjs']
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        }
      }
    }
  }
})

Esecuzione della build

npm run build

Questo comando genererà i file di output nella cartella dist.

Login su NPM

Prima di pubblicare il pacchetto, devi fare il login su npm:

npm login

Ti verrà chiesto di inserire username, password e email. In alternativa npm ti fornirà un link nel browser.

Pubblicazione del pacchetto

npm publish

Il pacchetto sarà disponibile per l’installazione tramite:

npm install nome-pacchetto

Aggiornamento del pacchetto

Modifica la versione nel package.json e ripeti la build e la pubblicazione:

npm version <major|minor|patch>
npm publish