reactjs - Hur delar man en React-komponent över flera projekt?

Jag har några React-komponenter i ett projekt som jag skulle vilja använda i några andra React-projekt. Vad skulle vara det bästa sättet att dela komponenterna mellan projekten? Jag vet att vi kan använda något som Bitly för att göra det, men finns det något annat open source-sätt, som git-submoduler, för att dela komponenterna mellan flera projekt.

Svar #1

Ett sätt som fungerade för mig är att definiera en komponent i en React-app (med create-react-app), lägga upp hela den React-appen på Github och npm install den som ett beroende. Jag uppmuntrar starkt att du kollar in den här resursen som förklarar i detalj hur man förbereder en React-komponent för den här processen. Följ stegen i den länkade handledningen upp till #3, och lägg sedan upp allt (inklusive /dist-mappen) på Github. Sedan kan du göra npm install org_name/repo_name och installera det som ett beroende i din andra React-app. För att importera en specifik komponent kan du sedan göra något som import { Button } from 'repo_name/dist/index' eller referera till vilken fil du än använde för att exportera dina komponenter.

Om länken inte fungerar, här är stegen i artikeln:

  1. Skapa en mapp som heter lib som lagrar alla komponenter du vill ta med till den andra React-appen. Definiera också en fil som heter index.js i denna mapp som exporterar dessa komponenter.
  2. Skapa ett repo för komponenterna på Github
  3. Installera Babel och bygg dist-mappen. (npm install --save-dev @babel/core @babel/cli @babel/preset-env och npm install --save @babel/polyfill)
  4. Lägg till följande konfigurationsfil i projektets översta mapp:
{
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}
  1. I package.json, ersätt byggskriptet med följande: "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";
  2. Kör kommandot npm run build

Svar #2

Det finns flera sätt beroende på din setup. Som @Alex Wayne föreslog är det enklaste sättet att använda en monorepo. Om din setup inte tillåter det kan du publicera ett paket till npm. Om du inte kan eller inte vill paketera ett publikt paket kan du publicera privata paket (med ett betalt konto) eller använda ett privat paketregister, såsom GitHub Packages. Det finns också självadministrerade lösningar för paketregistrar om du vill spara lite pengar i utbyte mot lite arbete.

Redigera 2023: Github-paket verkar nu ha en gratis plan för privata arkiv, tack @Taig för att du påpekade detta

Relaterade artiklar