Med hjälp av Paketet som en Bundler för att Reagera Program

0
60

Du kanske redan är bekant med webpack för kapitalförvaltning på projekt. Men det är en annan cool verktyg där ute som kallas Paket, vilket är jämförbart med webpack på att det hjälper med krångel-fri tillgång kombinationserbjudanden. Om Paketet verkligen skiner är att den kräver noll konfiguration för att komma igång, där andra bundlers kräver ofta att skriva en ton kod bara för att komma igång. Plus att Paketet är super snabbt när det körs eftersom det använder multicore bearbetning där andra, mindre komplexa och tunga beslut.

Så i ett nötskal, vi tittar på ett antal funktioner och fördelar:

  • Kod dela med dynamisk import
  • Tillgångar hantering för alla typer av filer, men naturligtvis för HTML, CSS och JavaScript
  • Hett Byte av Modul för att uppdatera delar utan en uppdatering av sida under utveckling
  • Misstag i koden markeras när de är inloggade, vilket gör dem lätta att hitta och korrigera
  • Miljövariabler för att enkelt skilja mellan lokal produktion och utveckling
  • Ett “produktionssätt” som snabbar upp byggprocessen genom att förhindra att onödiga steg bygga

Förhoppningsvis, du börjar se bra skäl för att använda Paket. Det är inte att säga att det bör användas till 100% hela tiden utan att det snarare är bra de fall där det är en hel del känsla.

I denna artikel kommer vi att se hur man ställer upp en Reagera-projekt med hjälp av Skiftet. När vi på det, vi kommer också att kolla in ett alternativ för att Skapa Reagera App som vi kan använda Paket för att utveckla Reagera program. Målet här är att se att det finns andra sätt ute för att arbeta i Reagera, med hjälp av Paketet som ett exempel.

Att sätta upp ett nytt projekt

OK, det första vi behöver är en projekt-mapp för att arbeta lokalt. Vi kan göra en ny mapp och navigera till den direkt från kommandoraden:

mkdir csstricks-reagera-paket && $_

Nästa, låt oss få vår obligatoriska paket.json-fil i det. Vi kan antingen använda sig av npm eller Garn genom att köra något av följande:

## Med npm
npm init -y

## Med hjälp av Garn, som vi kommer att fortsätta med hela artikeln
garn init -y

Detta ger oss ett paket.json-filen i vårt projekt mappen som innehåller standardkonfigurationer vi måste jobba lokalt. På tal om det, paketet paketet kan installeras globalt, men för denna tutorial, vi ska installera det lokalt som en dev beroende.

Vi behöver Babel när du arbetar i Reagera, så låt oss få det att gå:

garn lägga till paket-bundler babel-preset-env babel-preset-reagera –dev

Nästa installerar vi Reagerar och ReactDOM…

garn lägg till react react-dom

…sedan skapa ett babel.rc-fil och lägg till detta till det:

{
“presets”: [“miljö”, “reagerar”]
}

Därefter skapar vi vår bas App komponent i en ny index.js fil. Här är en snabb en som helt enkelt returnerar ett “Hej” rubrik:

importera Reagerar från ‘reagerar’
importera ReactDOM från ‘reagerar-dom”
klass App sträcker sig Reagera.Komponent {
render() {
avkastning (
<Reagera.Fragment>
<h2>Hej!</h2>
</Reagera.Fragment>
)
}
}

const rootElement = dokument.getElementById(“root”);
ReactDOM.render(<App />, rootElement);

Vi behöver en HTML-fil där Appen komponent kommer att monteras, så låt oss skapa en index.html filen inuti src katalog. Igen, här är ett ganska enkelt skal för att arbeta bort:

<html lang=”sv”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title> – Paket Reagera Exempel</title>
</head>
<body>
<div id=”root”></div>
<script src=”./index.js”></script>
</body>
</html>

Vi kommer att använda sig av Paket paket som vi installerat tidigare. För att det ska fungera måste vi ändra start-script i paketet.json-filen så ser det ut så här:

“skript”: {
“start”: “NODE_ENV=utveckling paket src/index.html –öppna”
}

Slutligen, låt oss gå tillbaka till kommandoraden och köra garn start. Programmet ska starta och öppna upp ett nytt fönster i webbläsaren pekar på http://localhost:1234/.

Arbeta med formatmallar

Paketet levereras med PostCSS ur lådan men, om vi ville arbeta med något annat, vi kan helt göra det. Till exempel, vi kan installera en node-sass att använda Sass om projektet:

garn lägga till –dev nod-sass autoprefixer

Vi har redan autoprefixer eftersom det är en PostCSS plugin, så att vi kan konfigurera som i postcss block av paket.json:

// …
“postcss”: {
“moduler”: false,
“plugins”: {
“autoprefixer”: {
“webbläsare”: [“>1%”, “sista 4 versioner”, “Firefox ESR”, “inte ie < 9”],
“flexbox”: “inga-2009”
}
}
}

Att sätta upp en produktion miljö

Vi kommer att vilja se till att vår kod och tillgångar sammanställs för användning i produktion, så låt oss se till att vi säger till våra bygga process där de kommer att gå. Igen, i paket-json:

“skript”: {
“start”: “NODE_ENV=utveckling paket src/index.html –öppna”,
“bygga”: “NODE_ENV=produktion paket bygga dist/index.html –den offentliga url -./”
}

Kör garn köra bygga kommer nu att bygga programmet för produktion och produktion i dist-mappen. Det finns några ytterligare alternativ som vi kan lägga till att förfina saker lite längre om vi vill:

  • – ur-dir directory-namn: Detta är för att använda en annan katalog för produktion filer istället för standard dist-katalogen.
  • –no-minify: Minification är aktiverat som standard, men kan vi inaktivera detta kommando.
  • –no-cache: Detta tillåter oss att inaktivera filsystem cache.

💩 SKIT (Skapa Reagera App Paket)

Skapa Reagera App-Paket (SKIT) är ett paket som byggdes av Shawn Swyz Wang för att hjälpa till att snabbt ställa upp Reagera program för Paket. Enligt den dokumentation som vi kan bootstrap någon programmet genom att köra det här:

npx skapa-reagera-app-paket-min-app

Som kommer att skapa de filer och kataloger som vi behöver för att börja arbeta. Då kan vi flytta över till program-mappen och starta servern.

cd-min-app
garn start

Skiftet är alla ställa upp!

Paketet är värt att utforska din nästa Reagera ansökan. Det faktum att det inte krävs konfigurering och att kombinera tid är super optimerad gör Paket värt med tanke på ett framtida projekt. Med mer än 30 000 stjärnor på GitHub, det ser ut som något som börjar bli lite dragkraft i gemenskapen.

Ytterligare resurser

  • Paket Exempel: exempel Paket med hjälp av olika verktyg och ramverk.
  • Grymt Paket: En sammanställd lista över fantastiska Paket resurser, bibliotek, verktyg och boilerplates.

Källkoden för den här guiden är tillgänglig på GitHub