Arbeide med Fusebox og Reagere

0
10

Hvis du søker etter en alternativ bundler å webpack, vil du kanskje ta en titt på FuseBox. Det bygger på hva webpack tilbud — kode-splitting, varme-modul omlasting, dynamisk import, etc. — men koden-splitting i FuseBox krever zero configuration som standard (selv om webpack vil tilby den samme som i versjon 4.0).

I stedet, FuseBox er bygget for enkelhet (i form av mindre komplisert konfigurasjon) og ytelse (med blant annet aggressiv caching metoder). Pluss, kan den utvides til å bruke tonnevis av plugins som kan håndtere alt du trenger utover de standarder.

Oh yeah, og hvis du er en fan av maskinskrevet kopi, er du kanskje interessert i å vite at FuseBox gjør det til en første-klasse statsborger. Det betyr at du kan skrive et program i maskinskrevet kopi — med ingen konfigurasjon! — og det vil bruke maskinskrevet kopi transpiler å lage skript som standard. Ikke tenkt på å bruke maskinskrevet kopi? Ingen bekymringer, den transpiler vil håndtere eventuelle JavaScript. Enda en bonus!

For å illustrere akkurat hvor fort det er å komme i gang, la oss bygge bein av en prøve-program som er vanligvis scaffolded med å lage reagere-app. Alt vi gjør vil være på GitHub hvis du ønsker å følge med.

FuseBox er ikke den eneste alternativ til webpack, selvfølgelig. Det er mange og, faktisk, Maks Akymenko har en stor skrive opp på Pakken, som er et annet flott alternativ verdt å se nærmere på.

Grunnleggende oppsett

Start med å lage et nytt prosjekt katalog og starte den med npm:

## Opprett katalogen
mkdir csstricks-fusebox-reagerer && $_
## Initialisere med npm standard valg
npm init -y

Nå kan vi installere noen avhengigheter. Vi kommer til å bygge den i app Reagere, så vi trenger at så godt som reagerer-dom.

npm installere –spare reagere reagere-dom

Neste, vi vil installere FuseBox og maskinskrevet kopi som en avhengighet. Vi vil kaste Uglify i det så vel for hjelp minifying våre skript og legge til støtte for å skrive stiler i Sass.

npm installere –spare-dev sikrings-boksen maskinskrevet kopi uglify-js node-sass

Ok, la oss nå lage en src-mappen i roten av prosjektet katalogen (som kan gjøres manuelt). Legg følgende filer (`app.js og index.js) i det, inkludert innholdet:

// App.js

import * som Reagerer fra “reagere”;
import * logo fra “./logo.svg”;

const App = () => {
retur (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<h1 className=”App-title”>Velkommen til å Reagere</h1>
</header>
<p className=”App-intro”>
For å komme i gang, rediger ” src/App.js` og lagre for å laste.
</p>
</div>
)
};

eksport-standard-App;

Du har kanskje lagt merke til at vi importerer en SVG-fil. Du kan laste den ned direkte fra GitHub-repo.

// index.js

import * som Reagerer fra “reagere”;
import * som ReactDOM fra “reagere-dom”;
import-Appen fra “./App”

ReactDOM.render(
<App />, – dokument.bürgerliches(‘root’)
);

Du kan se at måten vi håndterer import av filer er litt annerledes enn en typisk Reagerer app. Det er fordi FuseBox ikke polyfill import av standard.

Så, i stedet for å gjøre dette:

import Reagere fra “reagere”;

…vi gjør dette:

import * som Reagerer fra “reagere”;
<!– ./src/index.html –>

<!DOCTYPE html>
<html lang=”no”>
<head>
<title>CSSTricks Fusebox Reagere</title>
$css
</head>

<body>
<noscript>
Du må aktivere JavaScript for å kjøre dette programmet.
</noscript>
<div id=”root”></div>
$bunter
</body>
</html>

Styling er egentlig ikke poenget med dette innlegget, men la oss slippe noen i det å kle ting opp litt. Vi vil ha to stilark. Den første er for App-komponent og lagres som App.css.

/* App.css */

.App {
text-align: center;
}

.App-logo {
animasjon: App-logo-spinn uendelig 20-årene lineær;
høyde: 80px;
}

.App-header {
background-color: #222;
høyde: 150px;
polstring: 20 piksler;
color: white;
}

.App-intro {
font-size: large;
}

@keyframes App-logo-spinn {
fra {
forvandle: rotere(0deg);
}
til {
forvandle:
roter(360deg);
}
}

Den andre stilark er for index.js og bør lagres i indeksen.css:

/* indeks.css */
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

OK, vi er ferdig med første gangs rengjøring. På å utvide FuseBox med noen godbiter!

Plugins og konfigurasjon

Vi sa tidligere at konfigurere FuseBox er designet for å være mindre kompleks enn de liker av webpack — og det er sant! Opprette en fil som heter fuse.js i rotkatalogen på programmet.

Vi starter med å importere plugins vi skal gjøre bruk av, alle plugins kommer fra FuseBox pakken har vi installert.

const { FuseBox, CSSPlugin, SVGPlugin, WebIndexPlugin } = krever(“sikring-box”);

Neste, vi vil initialisere en FuseBox eksempel og si hva vi bruker som hjemmekatalogen, og der hvor å sette samlet eiendeler:

const sikring = FuseBox.init({
homeDir: “src”,
utgang: “dist/$name.js”
});

Vi vil la FuseBox vet at vi har tenkt å bruke maskinskrevet kopi kompilatoren:

const sikring = FuseBox.init({
homeDir: “src”,
utgang: “dist/$name.js”,
useTypescriptCompiler: true,
});

Vi identifisert plugins i første linje i konfigurasjonsfilen, men nå er vi nødt til å ringe dem. Vi bruker plugins ganske mye som det er, men definitivt sjekke ut hva CSSPlugin, SVGPlugin og WebIndexPlugin har å by på hvis du ønsker mer finkornet kontroll over alternativer.

const sikring = FuseBox.init({
homeDir: “src”,
utgang: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [ // HIGHLIGHT
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mal: “src/index.html”
})
]
});

const { FuseBox, CSSPlugin, SVGPlugin, WebIndexPlugin } = krever(“sikring-box”);

const sikring = FuseBox.init({
homeDir: “src”,
utgang: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mal: “src/index.html”
})
]
});
sikring.dev();
sikring
.bunt(“app”)
.instruksjoner(`>index.js`)
.hmr()
.uret()

sikring.run();

FuseBox gir oss muligheten til å konfigurere en utvikling server. Vi kan definere porter, SSL-sertifikater, og til og med åpne programmet i en nettleser på bygg.

Vi vil bare bruke standard miljø for dette eksempelet:

sikring.dev();

Det er viktig å definere utvikling miljø *før* bunt instruksjonene som kommer neste:

sikring
.bunt(“app”)
.instruksjoner(`>index.js`)
.hmr()
.uret().

Hva pokker er dette? Når vi initialisert den FuseBox eksempel, vi angitt en produksjon ved hjelp av dist/$name.js. Verdien for $navn er gitt av pakke () – metoden. I vårt tilfelle, og vi har satt verdien som app. Det betyr at når søknaden leveres, utgang reisemål vil være dist/app.js.

Instruksjonene () – metoden definerer hvordan FuseBox bør tilbyr med koden. I vårt tilfelle, kan vi fortelle det til å begynne med index.js og til å utføre den etter at den er lastet inn.

Hmr () – metoden er brukt i de tilfeller der vi ønsker å oppdatere brukerens når en fil endringer, vil dette vanligvis innebærer å oppdatere nettleseren når en fil endres. I mellomtiden, se() re-bunter den medfølgende koden etter hvert lagret endre.

Med det, vi vil cap den av ved å lansere bygge prosessen med sikring.run() på slutten av konfigurasjonsfilen. Her er alt vi bare dekket satt sammen:

const { FuseBox, CSSPlugin, SVGPlugin, WebIndexPlugin } = krever(“sikring-box”);

const sikring = FuseBox.init({
homeDir: “src”,
utgang: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mal: “src/index.html”
})
]
});
sikring.dev();
sikring
.bunt(“app”)
.instruksjoner(`>index.js`)
.hmr()
.uret()

sikring.run();

Nå kan vi kjøre programmet fra terminalen ved å kjøre node sikring. Dette vil starte bygge prosessen som skaper den dist mappen som inneholder den medfølgende koden og den malen vi er angitt i konfigurasjonen. Etter byggeprosessen er gjort, kan vi peke nettleseren til å http://localhost:4444/ for å se vår app.

Kjører oppgaver med Sparky

FuseBox inkluderer en oppgave løper som kan brukes til å automatisere en bygge prosessen. Det heter Gnist og du kan tenke på det som sorta som Grynt og Svelge, forskjellen er at den er bygget på toppen av FuseBox med innebygd tilgang til FuseBox plugins og FuseBox API.

Vi trenger ikke å bruke det, men oppgaven løpere gjør utviklingen mye enklere ved å automatisere ting vi vil ellers har å gjøre manuelt, og det er fornuftig å bruke hva som er spesielt designet for FuseBox.

For å bruke det, vi vil oppdatere konfigurasjonen vi har i fuse.js starter med noen importen som går på toppen av filen:

const { src oppgave, kontekst } = krever(“sikrings-boksen/sparky”);

Neste, vi vil definere en kontekst, som vil ligne på det vi allerede har. Vi er i utgangspunktet innpakning hva vi gjorde i en sammenheng og setConfig(), og deretter starte FuseBox i retur:

kontekst({
setConfig() {
tilbake FuseBox.init({
homeDir: “src”,
utgang: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mal: “src/index.html”
})
]
});
},
createBundle(sikring) {
tilbake sikring
.bunt(“app”)
.instruksjoner(`> index.js`)
.hmr();
}
});

Det er mulig å passere en klasse, funksjon eller vanlig objekt i en sammenheng. I ovennevnte scenario, vi passerer funksjoner, spesielt setConfig() og createBundle(). setConfig() initialiserer FuseBox og setter opp plugins. createBundle() gjør hva du kan forvente av navnet, som er bunting koden. Igjen, til forskjell fra hva vi gjorde før, er at vi er innebygging begge funksjonene til de ulike funksjonene som finnes i den sammenheng objekt.

Vi ønsker vår oppgave runner å kjøre oppgaver, ikke sant? Her er noen eksempler kan vi definere:

oppgave(“ren”, () => src(“dist”).ren(“dist”).exec());
oppgave(“standard”, [“ren”], asynkron (kontekst) => {
const sikring = kontekst.setConfig();
sikring.dev();
sammenheng.createBundle(sikring);
venter sikring.run()
});

Den første oppgaven vil være ansvarlig for rengjøring av dist-katalogen. Det første argumentet er navnet på oppgaven, mens den andre er den funksjonen som blir kalt når oppgaven kjøres.
Å kalle den første oppgaven, kan vi gjøre node sikring ren fra terminalen.

Når en oppgave er oppkalt standard (som er det første argumentet som i den andre oppgaven), som oppgave vil være den som blir kalt som standard når du kjører node sikring — i dette tilfellet, som er den andre oppgaven i vår konfigurasjon. Andre oppgaver må være nødt til å bli kalt eksplisitt i terminal, som node sikring <task_name>.

Så, vår andre oppgaven er standard og tre argumenter er gått inn i det. Det første er navnet på oppgaven (“default”), den andre ([“ren”]) er en rekke forutsetninger som bør kalles før selve oppgaven er utført, og den tredje er en funksjon (sikring.dev()) som blir initialisert FuseBox eksempel og begynner bunting og bygge prosessen.

Nå kan vi kjøre ting med node sikring i terminalen. Du har muligheten til å legge disse på din pakke.json-fil hvis det er mer komfortabel og kjent for deg. Skriptet delen vil se ut som dette:

“skript”: {
“start”: “node sikring”,
“ren”: “node sikring clean”
},

Det er en wrap!

Alt i alt, FuseBox er et interessant alternativ til webpack for alle søknaden bunting behov. Som vi så, det har samme slags kraft som vi alle har en tendens til å like om webpack, men med en mindre komplisert konfigurasjon prosess som gjør det mye enklere å få opp og kjører, takket være innebygd maskinskrevet kopi støtte, ytelse hensyn, og en oppgave løper som er designet for å dra nytte av den FuseBox API.

Hva vi ser på, var et ganske enkelt eksempel. I praksis, er du sannsynligvis kommer til å jobbe med mer komplekse applikasjoner, men begrepene og prinsippene er de samme. Det er hyggelig å vite at FuseBox er i stand til å håndtere mer enn hva som er bakt inn i det, men at det opprinnelige oppsettet er fortsatt super strømlinjeformet.

Hvis du leter etter mer informasjon om FuseBox, det er nettstedet og dokumentasjon er åpenbart gode utgangspunkt. følgende lenker er også super nyttig for å få mer perspektiv på hvordan andre setter det opp og bruke det på prosjekter.

  • Innføring FuseBox, et alternativ til Webpack
  • WebPack er ikke den eneste måten
  • Introduksjon til FuseBox (YouTube)