Creazione modulo NPM

Fonte: Build And Publish A React Component Library

Riferimento:

https://www.youtube.com/watch?v=hf6Z8OZanec&t=835s

Steps:

• Initializing The Project
• Storybook
• Component Library Source Code
• Rollup
• Publish To NPM

Step 1 - Initializing The Project

• Creare cartella di progetto
• Entrare nella cartella creata con Terminale run: npm init Crea package.json
  • package name: (nome cartella default) cambiare il nome del progetto facoltativo -> ok
  • version: (1.0.0) -> ok
  • description: aggiungere breve descrizione progetto -> ok
  • entry point: (index.js) / in seguito verrà modificata per ora si puo lasciare cosi.
  • author: "inserire nome"
  • licence: (ISC default) - Consigliano di mettere MIT (io non l'ho fatto)
• Creare scafholding di progetto:
  • creare cartella "src"
  • dentro "src" creare cartella "components"
  • dentro "components" creare file index.js

index.js:

    export * from './components/ParentComponent'

esporta il componente padre oppure aggiungere altre eventuali esportazioni se necessario

• installare react e react-dom npm install --save-dev react react-dom
• aggiungere al package.json "peerDependecies": {cp react e react-dom}

    devDependencies": {
            "react": "^18.2.0",
            "react-dom": "^18.2.0"
    },
     "peerDependecies": {
            "react": "^18.2.0",
            "react-dom": "^18.2.0"
     }

Serve a non creare collisioni tra le varie versioni di react nell'eventualità che qualcuno installa questo componente con una versione di react differente

Step 2 - STORYBOOK

Serve a visualizzare il componente in fase di sviluppo evitando di fare "build" e "publish su npm" per ogni modifica effettuata.

• install STORYBOOK (non funziona con node v18 usato con node v16) npx sb init

Dopo installazione Tips:

• Terminale: "Detecting project type ok" - conferma che ha trovato react
• aggiunge diverse devDep di babel
• il comando per lasciare il progetto è: npm run storybook (da usare in seguito)
• nella cartella di progetto (root) crea cartella .storybook con dentro file di configurazione generati automaticamente dentro "src" crea cartella "stories" con dentro file di esempio (in questo caso sono stati eliminati in quanto non è un tutorial su Storybook)

Creare componenti di progetto

Creare una cartella (in components) per ogni componente che si vuole utilizzare ES. ParentComponent e Child Src | . | . | . ------------ | ------------- | ------------- | ------------- . | components | . . | . | Child . | . | . | Child.jsx . | . | . | index.js . | . | ParentComponent . | . | . | ParentComponent.jsx . | . | . | index.js

in ogni cartella creare due file index.js - NomeComponent.jsx

• index.js 'per l'esportazione del componente'
• NomeComponent.jsx 'il componente e la sua logica'

index.js:

export * from './ParentComponent'

ParentComponent.jsx

export const ParentComponent = () => {
    return ( 
    <div> 
      <h2>Hello Parent</h2>
    </div>
    );
 }

Dentro cartella src nel file index.js aggiungere:

export * from './components/ParentComponent'

Per esportare i nostri componenti (ParentComponent e Child) nel caso in cui ci fossero più componenti da esporare assicurati di farlo in questo file

Tips:

solitamente il file "index.js" nelle normali applicazioni React serve per importare "App" (router - store etc) in questo caso sarà il file NomeStoria.stories.js a simulare "App"

Creare storia - Storybook

Dentro cartella "stories" creare file NomeStoria.stories.js + file "style.css"

NomeStoria.stories.js

import React from "react";
import {storiesOf} from "@storybook/react";
import { ParentComponent } from "../components/ParentComponent";
import './style.css'

const stories = storiesOf('App test', module);

stories.add('App', () => {
    return(<ParentComponent/>)
})

Il secondo parametro della funzione (stories.add('Param1', Param2)) può essere interpretato come un normale componente react (si possono utilizzare hook, funzioni, props etc etc)

Per controllare il corretto funzionamento di storybook run npm run storybook

Tips:

Potrebbe aprire ill broswer su porta 192.168.0.1/6006
sostituire con http://localhost:6006

potrebbe essere necessario fare diverse storie per più componenti

Step 3 - Component Library Source Code

Esempio codice:

• https://github.com/patriziosbr/react-pwr2 - Repo personale privata richiedere accesso a patriziosbr
• https://github.com/portexe/react-pwr - Repo pubblica del video tutorial

Step 4 - Rollup

Rollup.js serve a compilare il progetto npm install rollup rollup-plugin-babel @rollup/plugin-node-resolve rollup-plugin-peer-deps-external --save-dev Dipendenze aggiuntive: npm install --save-dev @babel/preset-react npm install --save-dev rollup-plugin-postcss npm install --save-dev rollup-plugin-terser npm install --save-dev rollup-plugin-babel

Nella root project fuori da src Creare file rollup.config.js per far funzionare il progetto ho modificato l'estenzione del file in rollup.config.mjs (m sta per modulo)

rollup.config.mjs:

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';

export default [
  {
    input: './src/index.js',
    output: [
      {
        file: 'dist/index.js',
        format: 'cjs', //commonjs
      },
      {
        file: 'dist/index.es.js', //da studiare
        format: 'es',
        exports: 'named',
      }
    ],
    plugins: [
      postcss({
        plugins: [],
        minimize: true,
      }),
      babel({
        exclude: 'node_modules/**',
        presets: ['@babel/preset-react']
      }),
      external(),
      resolve(),
      terser(), //per minify
    ]
  }
];

Creare la build/dist

Andare nel package.json aggiungere scripts -> "build-lib": "rollup -c" "module": "dist/index.es.js", modificare main -> "main": "dist/index.js":

Package.json:

{
  "name": "pu-react-pwr2",
  "version": "1.7.2",
  "description": "test publish react component",
  "main": "dist/index.js", //edit me
  "module": "dist/index.es.js", //add me
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "build-lib": "rollup -c" //add me
  },
  "author": "yourname",
  //resto del codice

npm run build-lib

Step 5 - Publish To NPM

• Creare account su npm
• nella root project folder run: npm adduser

Username: inserire username Password: pass Email: mail OTP Code via mail: 0000000

npm publish