de Nate Wang

Aflați cum să utilizați Rekit Studio într-un proiect React existent

Aflati cum sa utilizati Rekit Studio intr un proiect React
Imagine originală de la neplăcut

Am introdus Rekit Studio în ultimul articolși, de atunci, mulți oameni au fost interesați să-l folosească într-un proiect React existent. Acest articol va prezenta cum să faceți acest lucru. A învăța cum să migrezi este de fapt doar să înveți cum funcționează Rekit. Deci, acesta nu este doar un ghid pentru migrare, ci și o introducere în modul în care funcționează Rekit.

De fapt, este mai bine să vă gândiți să adăugați Rekit Studio la proiectele existente, mai degrabă decât să îl migrați, deoarece nu este nevoie să refactorizați tot codul dvs. existent la Rekit simultan. Puteți scrie cod nou cu Rekit și puteți lăsa codul vechi așa cum este – proiectul dvs. nu va fi defect. Apoi, puteți refactura codul vechi oricând mai târziu, atunci când este necesar. Poate doriți să vedeți o diagramă completă a dependenței sau să editați o componentă veche cu Rekit Studio.

Noi vom lua Implementarea TodoMVC a Redux ca exemplu nostru, deci este posibil să fie necesar să-l verificați cod sursa primul. Este creat de creați-reacționați-aplicație, care este un cazan oficial și foarte popular React. Dacă proiectul dvs. este creat și de această boilerplate, atunci acest articol va fi mai util.

Condiție prealabilă

Există doar trei premise pentru ca proiectul dvs. să utilizeze Rekit:

  1. Reacționează v0.14 +
  2. Redux
  3. Module ES6

Pentru a putea migra, proiectul ar trebui să se bazeze pe React, Redux. Nu contează dacă proiectul dvs. nu folosește React Router. Dar este posibil să aveți nevoie de un adaptor pentru a consuma React Router API JSON, deoarece Rekit îl folosește ca configurare de rutare. Acest lucru permite Rekit să știe cum să creeze / actualizeze / șterge și să afișeze regulile de rutare.

Rekit utilizează Babilon, parserul folosit de Babel, pentru a analiza modulele ES6 pentru refactorizare și diagrama dependenței. Deci, nu acceptă proiectele TypeScript sau Flow pentru moment.

1. Instalați rekit-core și rekit-studio

Atât Rekit Studio cât și Rekit CLI utilizare rekit-core pentru a gestiona elementele proiectului. Instalați-le mai întâi în proiect:

yarn add rekit-core rekit-studio --dev

Sau cu npm:

npm install rekit-core rekit-studio --save-dev

2. Copiați structura / fișierele de dosare Rekit în proiectul dvs.

Proiectele Rekit au o structură specială de dosare. Pentru a o crea rapid pentru proiectul dvs., creați o aplicație Rekit curată și copiați folderele / fișierele în proiectul dvs.

npm install rekit --globalrekit create my-app --clean

Apoi copiați aceste două foldere în proiect:

  • src /
  • instrumente /

Rețineți că va exista conflict cu al dvs.: pentru dosare, combinați-le. Pentru fișiere, nu înlocuiți niciunul dintre fișierele dvs. și nu uitați care dintre acestea au conflicte – apoi îmbinați-le sau redenumiți-le manual (voi introduce acest lucru mai târziu).

3. Porniți Rekit Studio

Rekit folosește scriptul de sub tools/server.js pentru a porni servere dev și Rekit Studio. Pentru un proiect existent, ar trebui să aveți deja propriul script pentru serverul de dezvoltare și construcție. Deci, trebuie să le îmbinăm.

Există 4 funcții în serverul Rekit’s.js:

  • startDevServer: citiți configurarea webpack și porniți serverul webpack dev.
  • buildDevDll: construiți biblioteci terțe în Dll pentru a îmbunătăți performanțele Webpack pentru dezvoltare folosind Plugin Webpack dll.
  • startStudioServer: începe un Expres server cu middleware Rekit Studio
  • startBuildServer: porniți un server Express pentru verificarea pachetului construit.

Puteți edita server.js pentru a porni serverul dvs. dev sau editați propriul dvs. server npm start script prin copierea funcției startStudioServer pentru a porni Rekit Studio.

Pentru exemplul TodoMVC de la Redux, scriptul pornește serverul dev scripts/start.js, îl modificăm adăugând următorul cod în partea de jos pentru a porni Rekit Studio:

Alternativ, puteți, de asemenea, să salvați scriptul de mai sus ca un fișier separat, cum ar fi start_rekit_studio.js apoi executați-l cu nod, mai degrabă apoi introduceți-l în scriptul dvs. existent.

Apoi, trebuie să adăugăm depozitele necesare dacă nu sunt încă instalate:

yarn add express express-history-api-fallback --dev

Sau cu npm:

npm install express express-history-api-fallback --save-dev

Și configurați portul Rekit Studio în package.json:

{   ...   "rekit": { "studioPort": 6090 },   ...}

Rețineți că proprietatea „rekit” din package.json este necesară deoarece Rekit o folosește pentru a detecta un proiect Rekit.

Asta e tot. Apoi, puteți începe Rekit Studio cu npm start(presupunând că porniți Studio în scriptul de pornire npm)! Acces http: // localhost: 6090 pentru aceasta. Și aplicația TodoMVC în sine rulează și ea. Încă acces http: // localhost: 3000 pentru aplicație:

1611511812 331 Aflati cum sa utilizati Rekit Studio intr un proiect React

Nu am schimbat nimic, dar Rekit Studio rulează acum în urmă.

Începeți să utilizați Rekit Studio pentru a scrie cod!

Odată ce Rekit Studio este pornit, îl puteți folosi pentru a scrie cod. Amintiți-vă că Rekit vă ajută doar să scrieți codul React, Redux standard, astfel încât să îl puteți folosi fără nicio limitare în proiect. De exemplu, să creăm o componentă HelloRekit sub caracteristica de acasă de Rekit Studio și editați textul implicit în „Bună ziua Rekit!”

1611511812 704 Aflati cum sa utilizati Rekit Studio intr un proiect React

Acum avem o componentă React: src/features/home/HelloRekit.js. Apoi utilizați-l în aplicația TodoMVC editând src/containers/App.js care este componenta rădăcină a aplicației. O puteți găsi în others din Rekit Studio. Deschideți-l și adăugați doar 2 rânduri de cod:

1611511813 271 Aflati cum sa utilizati Rekit Studio intr un proiect React

Salvați fișierul și apoi puteți vedea chiar diagrama dependenței App.js nu a fost creat de Rekit:

1611511813 120 Aflati cum sa utilizati Rekit Studio intr un proiect React

Un lucru de reținut este că atunci când importați un modul, ar trebui să utilizați calea fizică mai degrabă decât calea logică arătată în exploratorul de proiecte.

Apoi deschideți aplicația TodoMVC și puteți vedea că a fost afișată componenta HelloRekit:

1611511814 479 Aflati cum sa utilizati Rekit Studio intr un proiect React

Deși nu este atât de frumos, deoarece nu am adăugat încă stil, funcționează bine!

Integrarea stilurilor

Acum, să integrăm stilurile gestionate de Rekit în proiectul dvs. Deocamdată, Rekit acceptă doar Mai puțin sau Sass ca transpilator CSS. Trebuie să vă configurați pachetul (Webpack, Rollup etc.) pentru a-l susține: luați Less și Webpack, de exemplu, și adăugați src/styles/index.less la intrarea în config/webpack.config.dev.js:

entry: [  ...,  'src/styles/index.less',  ...],

Rețineți că Rekit folosește un anumit stil implicit în src/styles/reset.css care nu ar trebui folosită pentru proiectele existente. Deci, eliminați asta @import linie în src/styles/index.less.

Apoi adăugați Less-loader la config oneOf pentru aplicația TodoMVC. Ar putea fi inutil dacă proiectul dvs. a folosit mai puțin.

{  test: /.less$/,  loader: 'style-loader!css-loader!less-loader'}

Instalați mai puțin și mai puțin încărcător, dacă este necesar:

yarn add less@2.3.1 less-loader --dev

Rețineți că Less-loader este acum compatibil doar cu Less @ 2.3.1, dar nu cu cea mai recentă versiune 3.0.1.

Toată configurația pentru stilizare este finalizată, așa că acum să adăugăm un stil componentului HelloRekit și să vedem rezultatul:

1611511814 549 Aflati cum sa utilizati Rekit Studio intr un proiect React

Putem vedea că stilul administrat de Rekit a fost folosit de proiectul existent.

Integrarea Redux

În continuare, să integrăm codul Redux existent în Rekit. Fiecare aplicație Redux are un reductor de rădăcină. Cheia constă în îmbinarea reductorului Rekit cu cel existent. Este foarte ușor! Pentru aplicația TodoMVC, trebuie doar să importați src/reducers/todos.js la reductorul rădăcinii lui Rekit src/common/rootReducer.js:

1611511815 696 Aflati cum sa utilizati Rekit Studio intr un proiect React

Apoi utilizați acest reductor de rădăcină în aplicația TodoMVC editând src/index.js:

1611511815 119 Aflati cum sa utilizati Rekit Studio intr un proiect React

Ok, puteți utiliza Rekit pentru a gestiona noi acțiuni și reductoare Redux. Acum creați o acțiune cu Rekit de unul singur și încercați-o!

Integrarea routerului React

După cum sa menționat mai sus, Rekit gestionează regulile de rutare în format JSON. Fișierul de configurare a rutei rădăcină este src/common/routeConfig.js care încarcă regulile rutei din fiecare caracteristică src/features/<feature-name>/route.js. Când creați o componentă cu o anumită cale URL, actualizați din nous the rofișier ute.js pentru a insera o regulă de rutare.

Deci nu este necesar să utilizați React Router – puteți utiliza orice bibliotecă de router care poate consuma regulile definite de API-ul JSON. Într-o aplicație Rekit, src/Root.js este locul în care regulile JSON sunt tratate pentru a genera declarații React Router v4 în JSX.

Deoarece aplicația TodoMVC nu folosește un router, folosim doar modul implicit al Rekit. Prima instalare react-router-dom și react-router-redux la proiectul dvs. dacă nu este încă instalat:

yarn add react-router-dom react-router-redux@next --dev

Apoi, trebuie să atingeți două fișiere ale aplicației TodoMVC:

  1. Actualizați src/index.js pentru a reda Root.js în loc de src/containers/App.js.
1611511816 665 Aflati cum sa utilizati Rekit Studio intr un proiect React

Rețineți că Root.js a folosit Provider din react-redux pentru o componentă, deci nu mai este necesar în index.js.

2. Actualizare src/features/home/route.js pentru a adăuga o regulă care se potrivește cu o anumită cale URL a componentei TodoMVC src/containers/App.js:

1611511816 670 Aflati cum sa utilizati Rekit Studio intr un proiect React

Nu trebuie să adăugați reguli la ruta home.js. Ar putea aparține oricărei caracteristici, chiar și a rădăcinii routeConfig.js.

Acum puteți accesa TodoApp prin această adresă URL: http: // localhost: 3000 / todos . Putem vedea că componenta containerului Todo.MVC App.js este gestionată acum de React Router.

Am terminat migrarea React Router. Acesta a fost doar exemplul de cod al TodoMVC. Pentru aplicația dvs., abordarea este similară. Dacă folosiți și React Router v4, atunci folosiți doar Root.js – altfel scrieți propriul adaptor pentru a consuma configurarea de rutare JSON a Rekit.

Teste de unitate

Rekit Studio folosește scriptul tools/run_test.js pentru a rula teste unitare după modelul fișierului de testare, astfel încât să nu îl redenumiți sau să îl mutați. De exemplu, utilizați această comandă pentru a testa caracteristica de acasă:

node run_test.js features/home/**/*.test.js

Scriptul folosește Mocha pentru a rula teste și nyc pentru a genera un raport de acoperire a testelor. Dacă utilizați alte cadre de testare, cum ar fi Glumă, editați acest script pentru a rula testele dvs.

Construi

Rekit Studio folosește scriptul tools/build.js pentru a construi proiectul. Deci, nu ar trebui să îl redenumiți sau să îl mutați. Tot ce trebuie să faceți este să introduceți scriptul de construcție în acest script, astfel încât să puteți începe să creați prin interfața grafică Rekit Studio.

Configurarea Rekit este finalizată

Deocamdată, am adăugat Rekit la un proiect existent. Înseamnă că puteți începe să scrieți un nou cod cu Rekit Studio și să lăsați vechiul cod așa cum este. Proiectul ar trebui să funcționeze în continuare bine ca înainte.

Dar, așa cum am menționat mai sus, este posibil să avem nevoie să refactorizăm vechiul cod, astfel încât să poată fi gestionat de Rekit. În continuare, să vedem cum se face migrarea.

Gândirea în trăsături

Una dintre abilitățile esențiale ale Rekit este împărțirea unei aplicații complicate în caracteristici slab decuplate. O caracteristică este un concept de nivel înalt și am introdus odată arhitectura aici. Pentru aplicația dvs., ar trebui să luați în considerare, de asemenea, crearea de caracteristici pentru a gestiona codul existent, mai degrabă decât plasarea întregului cod într-o singură caracteristică.

Componente migratoare

Fiecare componentă este formată din trei fișiere:

  1. Component.js: ar trebui să fie întotdeauna pus direct sub un folder de caracteristici: src/features/<feature-name/Component.js
  2. Component.less / scss: ar trebui să fie întotdeauna pus direct sub un folder de caracteristici: src/features/<feature-name/Component.les
  3. Component.test.js: ar trebui să fie în dosarul testelor: tests/features/<feature-name>/Component.test.js

Poziția fișierelor și modelul de denumire ar trebui să urmeze convențiile Rekit descrise aici astfel încât Rekit să le poată refactoriza atunci când este necesar. Rekit detectează o componentă verificând dacă un modul din folderul de caracteristici importă React.

Nodul DOM rădăcină al fiecărei componente ar trebui să aibă un nume de clasă CSS unic. În Rekit, modelul este <feature-name>-<component-name>. Este întotdeauna în cazul kebab using lodash’s Funcția _.kebabCase. Acest nume de clasă va fi actualizat automat când redenumiți o componentă cu Rekit.

Ținând cont de aceste reguli, puteți muta componenta într-un dosar de caracteristici. Apoi Rekit Studio îl poate încărca în exploratorul de proiecte și îl poate edita cu editorul de elemente (cu file pentru diferite părți ale unei componente).

Puteți verifica rezultatul final aici pentru a vedea cum Rekit organizează componente pentru aplicația TodoMVC.

Acțiuni migratoare și reductoare

Rekit folosește o abordare diferită pentru a organiza acțiuni și reductoare Redux în comparație cu exemplele oficiale Redux (descrise aici). Deci, trebuie să vă împărțiți actions.js și reducers.js în diferite fișiere. Fiecare fișier are o acțiune și reducătorul său. Cel mai simplu mod este să creați o acțiune de Rekit Studio, apoi să vă mutați vechea logică de acțiune / reductor în interiorul acesteia.

Numele acțiunilor și constantele tipului de acțiune ar trebui, de asemenea, să fie denumite în modul Rekit astfel încât Rekit să le poată refactoriza. De exemplu, această imagine arată cum se migrează addTodo acțiune în modul Rekit:

1611511817 34 Aflati cum sa utilizati Rekit Studio intr un proiect React

Nu trebuie să vă schimbați logica de afaceri. Pune-le într-un loc nou. Cu această abordare, veți putea gestiona mai ușor acțiunile / reductoarele Redux.

De asemenea, puteți verifica rezultatul final aici pentru a vedea cum Rekit organizează acțiuni pentru aplicația TodoMVC.

rezumat

Trebuie să recunosc că adăugarea Rekit la un proiect existent este mult mai ușoară decât credeam inițial. Nu trebuie să vă schimbați configurația webpack / pachet / pachet, modul în care vă construiți / testați proiectul sau modul în care începeți aplicația. Dar asigurați-vă că Rekit rulează în proiectul dvs. în trei pași:

  1. Creați structura de dosare / placa de bază pe care Rekit o înțelege
  2. Adăuga rekit-core rekit-studio proiectului tău.
  3. Creați scriptul pentru a porni Rekit Studio

Acum puteți scrie un nou cod cu Rekit Studio!

Acest articol folosește aplicația TodoMVC ca exemplu pentru migrare. Proiectele dvs. ar putea fi mult mai complicate, deci este posibil să aveți alte probleme atunci când migrați. Dacă faceți acest lucru, nu ezitați să vă puneți întrebările în comentarii și voi încerca tot posibilul pentru a vă ajuta să le rezolvați. Mulțumiri!