Hvordan teste kodeendringer i Jøkul i ditt eget prosjekt før publisering

Hvordan linke pakker

Enten prosjektet ditt bruker Yarn, eller om du bruker NPM er stegene identiske. Kort fortalt er det to trinn du trenger å gjøre:

Kjør yarn link eller npm link fra mappen til pakka du skal teste
Kjør yarn link <pakkenavn> eller npm link <pakkenavn> i ditt eget prosjekt

NB: hvis du bruker NPM og skal teste flere pakker (for eksempel både React og CSS av en komponent) så må du kjøre én kommando med alle pakkenavn! Du kan også bruke scriptet yarn linker fra toppnivå i Jøkul.

npm link @fremtind/jkl-summary-table @fremtind/jkl-summary-table-react

Om du bruker Yarn kan du kjøre en link-kommando per pakke hvis du vil, men den samme kommandoen som over vil også fungere med yarn i stedet for npm.

Hjelpeverktøy for å linke hele Jøkul

Om du skal teste mer enn én pakke kan det være like greit å linke opp hele Jøkul. For å gjøre det enklere har vi et ferdig script som automatiserer dette.

yarn linker

Scriptet vil be deg om en filsti, men ellers skal resten gå av seg selv. Filstien kan være absolutt eller relativ til Jøkul sin package.json. Scriptet finner automatisk ut av om du bruker yarn eller npm i prosjektet ditt.

Her er et eksempel på hvordan det kan se ut om du har et prosjekt i samme mappe som Jøkul-repositoriet.

> $ yarn linker
yarn run v1.22.18
$ node scripts/linker.js
prompt: Hva er filstien til prosjektet hvor du vil teste?:  ../wllm-importkalkulator
Fant package-lock.json. Fortsetter med npm.
Gjør klar pakker for linking...

Linking steg for steg

Guiden bruker npm som eksempel, men de samme kommandoene fungerer med yarn. Bruk det samme verktøyet dere vanligvis bruker i prosjektet du skal teste med.

Si at vi skal teste endringer i SummaryTable lokalt i vår egen app. Vi har endringer i både React og Sass vi vil teste.

Start med å åpne en terminal og gå til mappen packages/summary-table. Kjør npm link i denne mappen.

cd ~/jokul/packages/summary-table
npm link

Nå har vi fortalt npm at det finnes en pakke @fremtind/jkl-summary-table på disk som skal kunne brukes i andre prosjekter.

Gå til packages/summary-table-react og gjenta kommandoen.

cd ../summary-table-react
npm link

Igjen, nå har vi fortalt npm at det finnes en pakke @fremtind/jkl-summary-table-react på disk som skal kunne brukes i andre prosjekter.

På tide å bruke dem!

Åpne en terminal og gå til ditt eget prosjekt hvor du vil teste endringene. Kjør npm link, men denne gangen oppgir du hvilke pakker du ønsker å bruke.

cd ~/my-project
npm link @fremtind/jkl-summary-table @fremtind/jkl-summary-table-react

NB: med NPM er det viktig at du lister opp alle pakkene du vil linke i samme kommando. Neste gang du kjører npm link <pakkenavn> vil gamle linker fjernes. Yarn har ikke denne oppførselen, så der kan du kjøre yarn link <pakkenavn> så mange ganger du vil.

Test endringene dine

Nå skal du kunne teste endringer du har gjort i kontekst av din egen app. Start appen din på vanlig måte og sjekk at endringene du har gjort i Jøkul er med og fungerer som forventet.

NB: du må bygge pakkene i Jøkul for at endringer skal kunne plukkes opp i appen din. Linkede pakker har ikke tilgang på flere filer enn de som vanligvis blir publisert. Med andre ord, ferdigbygget JavaScript, CSS, og Sass-kode.

Når du er fornøyd med endringene dine bør du rydde opp slik at du ikke ender opp i en rar tilstand senere.

Konfigurasjon av Webpack

For dere som bruker Webpack kan dere oppleve at bygget feiler på grunn av en krasj i React, for eksempel "Cannot read properties of null (reading 'useState')". Det skjer fordi Webpack blir forvirret av Jøkuls versjon av React på disk, som ligger nærmere den linkede koden.

For å fikse problemet må du peke Webpack eksplisit til din versjon av React og React DOM:

const path = require("path");

const config = {
  resolve: {
    alias: {
      // Path her antar at webpack.config.js ligger i samme mappe som node_modules/
      react$: path.resolve(__dirname, "node_modules/react/index.js"),
      "react-dom$": path.resolve(__dirname, "node_modules/react-dom/index.js"),
    },
  },
};

Konfigurasjon av Next.js

Next bruker Webpack under panseret, så løsningen for å teste der blir liknende den for Webpack direkte:

const path = require("path");

module.exports = {
  webpack: (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        react$: path.resolve(__dirname, "node_modules/react/index.js"),
        "react-dom$": path.resolve(
          __dirname,
          "node_modules/react-dom/index.js"
        ),
      },
    };
    return config;
  },
};

Endringene mine dukker ikke opp selv om node_modules er lenket opp riktig

Ikke alle byggverktøy ser etter endringer i node_modules. Om du ser at filene peker riktig på disk, prøv å restart devserveren din.

Om du sliter med at CSS-endringer ikke plukkes opp av appen din, prøv å importer uminifiserte filer. Ved testing med Yarn og Next.js ble det ikke plukket endringer i .min.css, men ved endring til .css gikk alt fint.

Ved lenking med NPM og Next.js måtte siden refreshes for å få de nyeste endringene.

Rydd opp etter deg

For å unngå at du sitter med en aktiv link til en annen versjon av Jøkul enn det prosjektet ditt forventer er det lurt å rydde opp etter deg først som sist. Dette er en reversering av de samme stegene du gjorde for å linke, men denne gangen er kommandoen unlink.

Kjør yarn unlink <pakkenavn> eller npm unlink <pakkenavn> i ditt eget prosjekt
Kjør yarn unlink eller npm unlink fra mappen til pakka du skal teste

Opprydding steg for steg

Guiden bruker npm som eksempel, men de samme kommandoene fungerer med yarn. Bruk det samme verktøyet dere vanligvis bruker i prosjektet du skal teste med.

Åpne en terminal og gå til ditt eget prosjekt hvor du har testet endringene. Kjør npm unlink og list opp alle pakkene du har testet. For å forstette på eksempelet vårt med SummaryTable ville det sett slik ut:

cd ~/my-project
npm unlink @fremtind/jkl-summary-table @fremtind/jkl-summary-table-react

Nå som det har skjedd endringer i node_modules er det en god idé å kjøre npm install. Om du bruker Yarn vil du få tips om å kjøre yarn --force-install.

Det er også lurt å rydde opp lenkene fra Jøkul-siden.

I terminalen, gå til mappen packages/summary-table. Kjør npm unlink i denne mappen.

cd ~/jokul/packages/summary-table
npm unlink

Gå til packages/summary-table-react og gjenta kommandoen.

cd ../summary-table-react
npm unlink

Takk for at du er med og gjør Jøkul bedre ♥️