reactjs - Cum să partajezi un component React între mai multe proiecte?

Am câteva componente React într-un proiect pe care aș dori să le folosesc în câteva alte proiecte React. Care ar fi cea mai bună modalitate de a partaja componentele între proiecte? Știu că am putea folosi ceva de genul bitly pentru asta, dar există vreo altă metodă open source, cum ar fi modulele subgit, pentru a partaja componentele între mai multe proiecte.

Răspuns #1

Un mod care a funcționat pentru mine este să definești un component într-o aplicație React (folosind create-react-app), să aduci întreaga aplicație React pe Github și să o npm install ca dependență. Te încurajez să verifici această resursă care explică în detaliu cum să pregătești un component React pentru acest proces. Urmează pașii din tutorialul link-uit până la #3, apoi adu totul (inclusiv folderul /dist) pe Github. Apoi, fă npm install org_name/repo_name și instalează-l ca dependență în a doua ta aplicație React. Apoi, pentru a importa un component specific, poți face ceva de genul import { Button } from 'repo_name/dist/index' sau să faci referire la orice fișier pe care l-ai folosit pentru a exporta componentele tale.

În cazul în care linkul nu funcționează, iată pașii din articol:

  1. Creează un folder numit lib care stochează toate componentele pe care vrei să le aduci în cealaltă aplicație React. De asemenea, definește un fișier numit index.js în acest folder care exportă aceste componente.
  2. Creează un depozit pentru componente pe Github
  3. Instalează Babel și construiește folderul dist. (npm install --save-dev @babel/core @babel/cli @babel/preset-env și npm install -save @babel/polyfill)
  4. Adăugați fișierul de configurare următor în folderul de nivel superior al proiectului dvs.:
{
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}
  1. În package.json, înlocuiește scriptul de build cu următorul: "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";
  2. Rulează comanda npm run build

Răspunsul #2

Există mai multe moduri în funcție de configurația ta. După cum a sugerat @Alex Wayne, cea mai ușoară modalitate este să folosești un monorepo. Dacă configurația ta nu permite acest lucru, poți publica un pachet pe npm. Dacă nu poți sau nu vrei să creezi un pachet public, poți publica pachete private (cu un cont plătit) sau poți folosi un registru privat de pachete, cum ar fi GitHub packages. Există, de asemenea, soluții autogestionate pentru registre de pachete dacă vrei să economisești niște bani în schimbul unui pic de muncă.

Edit 2023: Pachetele Github par să aibă acum un plan gratuit pentru depozitele private, mulțumesc @Taig pentru că ai menționat acest lucru