de Colby Miller

Cum să publicați o componentă React Native în NPM – este mai ușor decât credeți

0* eB8L7 mDpQKLYPE
Fotografie de Markus Spiske pe Unsplash

Deci, doriți să contribuiți la comunitatea open source? Asta-i grozav! Ajutorul la dezvoltarea ecosistemului destul de tânăr al React Native este extraordinar.

Când am decis să-mi asum această sarcină nu cu mult timp în urmă, am observat că nu există prea mult material în publicarea componentelor React Native în NPM. Așadar, sper că această postare va ajuta la facilitarea procesului pentru alții.

Notă: Toate exemplele de cod de mai jos provin de la reacționează-nativ-pași-de-progres, primul meu pachet NPM.

Înainte de a începe, asigurați-vă că vă înregistrați pentru un cont pe NPM. Poti sa faci asta aici.

Configurare inițială

În primul rând, să creăm un folder în care va trăi componenta noastră React Native.

mkdir <folder_name> && cd <folder_name>

# For example
mkdir my-component && cd my-component

Notă: Pentru a menține acest articol scurt, presupun că aveți deja Node și NPM instalate pe computer. Dacă nu este cazul, aruncați o privire la asta documentație pentru ajutor.

Odată ajuns în dosar, trebuie să inițializăm un nou pachet NPM tastând npm init. Aceasta va crea un package.json fișier care va conține câteva metadate importante despre componenta React Native.

Va fi afișată o serie de întrebări, cum ar fi numele pachetului, versiunea, descrierea, cuvintele cheie etc.

Important: Când i s-a cerut punct de intrare, asigurați-vă că intrați index.js și apăsați Enter. Acesta va fi fișierul care vă exportă componenta principală.

{
  "name": "react-native-progress-steps",
  "version": "1.0.0",
  "description": "A simple and fully customizable React Native component that implements a progress stepper UI.",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/colbymillerdev/react-native-progress-steps.git"
  },
  "keywords": [
    "react-native",
    "react-component",
    "react-native-component",
    "react",
    "react native",
    "mobile",
    "ios",
    "android",
    "ui",
    "stepper",
    "progress",
    "progress-steps"
  ],
  "author": "Colby Miller",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/colbymillerdev/react-native-progress-steps/issues"
  },
  "homepage": "https://github.com/colbymillerdev/react-native-progress-steps#readme"
}

Structura proiectului

Următorul pas este configurarea unei structuri de dosare pentru componenta dvs. React Native. Acest lucru depinde de dvs., dar vă voi împărtăși un exemplu simplu de mai jos:

Cum sa publicati o componenta React Native in NPM

Veți observa câteva fișiere pe care nu le-am creat încă. Ne vom adresa celor în scurt timp.

Să creăm index.js fişier. Acesta va fi cel mai important fișier pentru exportul / importul corect al componentei. Navigați la folderul proiectului rădăcină și tastați touch index.js.

Există câteva modalități diferite de a parcurge conținutul din acest fișier.

  • Scrierea directă a clasei de componente în interiorul index.js și exportați-l acolo.
  • Crearea unui fișier JavaScript component separat și exportarea acestuia în index.js.
  • În cele din urmă, crearea mai multor fișiere JavaScript pentru componente și containere și exportarea tuturor celor necesare în index.js fişier. Aceasta este abordarea pe care am urmat-o și poate fi văzută în exemplul de mai jos.
import ProgressSteps from './src/ProgressSteps/ProgressSteps';
import ProgressStep from './src/ProgressSteps/ProgressStep';

export { ProgressSteps, ProgressStep };

Indiferent de abordarea adoptată, ceea ce este exportat în acest fișier este ceea ce aplicația consumatoare va importa și reda în cele din urmă. Aceasta este partea importantă de reținut.

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

Dependențe

Trebuie să stabilim ce dependențe trebuie instalate pentru ca componenta noastră React Native să funcționeze corect.

Există trei tipuri diferite de dependențe:

  • peerDependencies: Aceste dependențe sunt necesare pentru a rula componenta; cu toate acestea, se așteaptă ca acestea să fie deja instalate în aplicație. Un exemplu în acest sens este react-native în sine. Cu toate acestea, în cazul React Native nu este necesar să adăugați react-native ca dependență de la egal la egal.
  • dependențe: Acestea sunt, de asemenea, necesare pentru a rula componenta, dar nu puteți presupune că aplicația consumatoare le are instalate. Câteva exemple ar fi lodash și prop-types .
  • devDependencies: Acestea sunt mai simple. Acestea sunt toate pachetele necesare dezvoltării componentei React Native. Exemple de acestea ar fi linter-ul dvs., cadrul de testare și babel.

Instalarea dependenței Babel

Următorul nostru pas este să ne conectăm componenta la Babel. Putem face acest lucru pur și simplu instalând următoarea dependență de dev:

npm install metro-react-native-babel-preset --save-dev

După finalizarea instalării, trebuie să creăm un .babelrc fișier și adăugați următoarele:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

Crearea .gitignore și .npmignore

Unul dintre pașii finali este crearea standardului .gitignore și .npmignore fișierele ca o bună practică. Acest lucru va evita, de asemenea, orice probleme la publicarea pe NPM.

# Logs
*.log
npm-debug.log

# Runtime data
tmp
build
dist

# Dependency directory
node_modules
.gitignore
# Logs
*.log
npm-debug.log

# Dependency directory
node_modules

# Runtime data
tmp

# Examples (If applicable to your project)
examples
.npmignore

Testarea

În mod normal, este relativ simplu să conectați și să instalați pachetul nostru local la aplicații, fără a fi nevoie să publicați mai întâi pe NPM.

Acest lucru se va face folosind npm link comandă în directorul rădăcină al pachetelor noastre. Apoi, navigați la o aplicație și tastați npm link <package-naeu> then npm install.

Cu toate acestea, la momentul redactării acestui articol, React Native și npm link comanda nu funcționează frumos împreună.

Există două soluții pe care le-am găsit până acum care rezolvă această problemă:

1. Instalarea pachetului într-o aplicație utilizând calea locală

Pentru a face acest lucru, navigați la o aplicație și instalați direct pachetul acolo folosind calea directorului său.

npm i <path_to_project>

# For example
npm i ../my-component

După ce ați făcut modificări pachetului, va trebui să revizitați aplicația și să reinstalați. Aceasta nu este o soluție ideală, dar este una care funcționează.

2. Crearea unui folder Exemple și utilizarea pachetului npm

npm pack comanda este o modalitate excelentă de a vă împacheta rapid componenta React Native și de a o pregăti pentru testare. Se creează un .tgz fișier care poate fi apoi instalat într-o aplicație deja existentă.

Să creăm un /examples folder din directorul rădăcină al pachetului NPM. Acest folder va fi în esență propria aplicație React Native care rulează și afișează exemplele dvs.

Acest lucru se poate face prin crearea unui proiect React Native folosind react-native init examples.

Notă: Pentru aceasta este necesar ca React Native să fie deja instalat pe computer. Puteți urmări ghidul Facebook aici.

După ce se termină, rulați npm pack comanda pentru a genera un fișier care va avea o convenție de denumire similară cu package-name-0.0.0.tgz.

Apoi, intrați în /examples și instalați componenta executând npm i ../package-name-0.0.0.tgz sau yarn add ../package-name-0.0.0.tgz în terminal. Nu uitați să înlocuiți package-name și 0.0.0 respectiv.

Creați un fișier sau fișiere JavaScript care vă vor afișa componenta. Pentru acest exemplu, vom numi acest lucru ExampleOne.js. Este important să subliniem că ar trebui să importați componenta pe care tocmai ați instalat-o folosind fire sau npm în acest fișier.

Odată ce fișierul este creat, deschideți App.js și importați / exportați fișierul de exemplu. Orice este exportat în acest fișier este ceea ce va fi afișat atunci când rulați proiectul pe un simulator sau dispozitiv.

import ExampleOne from './ExampleOne'

export default ExampleOne;

În cele din urmă, putem rula aplicația folosind react-native run-ios sau react-native run-android. Acum ar trebui să putem vedea componenta noastră și să o testăm corect.

După ce ați făcut modificări la codul pachetelor dvs. NPM, nu uitați să rulați npm pack comanda, apoi intrați în /examples dosar către npm install sau yarn add .tgz fişier.

Un avantaj extraordinar al acestei opțiuni este posibilitatea altor utilizatori de a vă rula exemplele pe un simulator sau dispozitiv. Acest lucru le permite să încerce componenta dvs. fără a fi nevoie să o importe mai întâi în propria aplicație. De asemenea .tgz fișierul poate fi ușor partajat între colegi, prieteni etc.

Publicarea către NPM

În cele din urmă, suntem gata să împărtășim componenta noastră React Native cu minunata comunitate open source!

Publicarea este foarte rapidă și ușoară. Doar conectați-vă la contul dvs. NPM de la terminal folosind npm login apoi publicați folosind npm publish .

Un lucru de reținut este că NPM ne cere să incrementăm versiunea în package.json de fiecare dată înainte de publicare.

Concluzie

Am acoperit o tonă de material în această postare. Dacă întâmpinați probleme, nu ezitați să-mi trimiteți o întrebare în comentariile de mai jos. Vă mulțumim că ați urmat, abia aștept să văd ce construiți!

Contribuțiile, cererile de extragere și recomandările sunt întotdeauna binevenite reacționează-nativ-pași-de-progres. Încercați în următorul dvs. proiect și spuneți-mi ce părere aveți!