Att arbeta med Säkringsdosan och Reagera

0
9

Om du söker efter ett alternativ bundler att webpack, du kanske vill ta en titt på Säkringsdosan. Den bygger på vad webpack erbjuder — kod-delning, hot modul omlastning, dynamisk import, etc. — men kod-delning i Säkringsdosan kräver zero configuration som standard (även om webpack kommer att erbjuda samma som i version 4.0).

Istället Säkringsdosan är byggt för enkelhet (i form av mindre komplicerad konfiguration) och prestanda (inklusive aggressiva caching metoder). Plus, det kan utvidgas till att använda massor av plugins som kan hantera någonting du behöver utöver standard.

Oh ja, och om du är ett fan av maskinskriven text, kan du vara intresserad av att veta att Säkringsdosan gör det till en första klassens medborgare. Det innebär att du kan skriva en ansökan i Typescript — med ingen konfiguration! — och det kommer att använda Typescript transpiler att sammanställa skript som standard. Planerar inte att använda Maskin? Inga bekymmer, transpiler kommer att hantera JavaScript. Ännu en bonus!

För att illustrera hur snabbt det är att få upp och igång, låt oss bygga upp skelettet av ett program med skapa-reagera-app. Allt vi gör kommer att vara på GitHub om du vill följa med.

Säkringsdosan är inte det enda alternativet till webpack, naturligtvis. Det finns det gott om och, i själva verket Maks Akymenko har ett stort skriv på Paketet vilket är ett annat bra alternativ värt att titta in.

Den grundläggande installationen

Börja med att skapa ett nytt projekt katalog och initierar det med npm:

## Skapa katalogen
mkdir csstricks-säkringsdosan reagera && $_
## Initiera med npm standard alternativ
npm init -y

Nu kan vi installera några beroenden. Vi kommer att bygga appen i Reagera, så vi kommer att behöva att reagera-dom.

npm install –spara react react-dom

Nu ska vi installera Säkringsdosan och maskinskriven text som beroenden. Vi ska kasta Uglify i det så väl för att få hjälp-minifying våra manus och lägga till stöd för stilar i Sass.

npm install-spara-dev-säkring-box typescript-uglify-js nod-sass

Okej, nu ska vi skapa ett src-mappen i roten av projektet katalog (som kan göras manuellt). Lägg till följande filer (`app.js och index.js) i det, inklusive innehållet:

// App.js

import * som Reagerar från “reagera”;
import * som en logotyp från “./logotyp.svg”;

const App = () => {
avkastning (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logotyp” />
<h1 className=”App-title”>Välkommen till Reagera</h1>
</header>
<p className=”App-intro”>
För att komma igång, redigera `src/App.js ” och spara för att ladda om.
</p>
</div>
)
};

export standard App;

Du kanske har märkt att vi importerar en SVG-fil. Du kan ladda ner den direkt från GitHub-repo.

// index.js

import * som Reagerar från “reagera”;
import * som ReactDOM från “reagera-dom”;
import från App “./Appen”

ReactDOM.render(
<App / > handling.getElementById (“root”)
);

Du kan se att det sätt som vi hanterar import av filer är lite annorlunda än en vanlig Reagera app. Det beror på Säkringsdosan inte polyfill import som standard.

Så, istället för att göra detta:

importera Reagerar från “reagera”;

…vi gör det här:

import * som Reagerar från “reagera”;
<!– ./src/index.html –>

<!DOCTYPE html>
<html lang=”sv”>
<head>
<title>CSSTricks Säkringsdosan Reagera</title>
$css
</head>

<body>
<noscript>
Du måste aktivera JavaScript för att köra denna app.
</noscript>
<div id=”root”></div>
$buntar
</body>
</html>

Styling är verkligen inte poängen med det här inlägget, men låt oss släppa en del i det att klä upp saker och ting lite. Vi har två stilmallar. Den första är för App komponent och sparas som App.css.

/* App.css */

.App {
text-align: center;
}

.App-logo {
animation: App-logo-spin oändliga 20-årsåldern är linjär,
height: 80px;
}

.App-header {
background-color: #222;
height: 150px;
padding: 20px;
färg: vit.
}

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

@keyframes App-logo-spin {
från {
förändra: rotera(0deg);
}
till {
förändra:
rotera(360deg);
}
}

Den andra stilmall är för index.js och bör sparas som index.css:

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

OK, vi är klar med den första städning. På att utvidga Säkringsdosan med lite godsaker!

Plugins och konfiguration

Vi sa tidigare att konfigurera Säkringsdosan är utformade för att vara mindre komplicerade än vad de tycker om webpack — och det är sant! Skapa en fil som heter fuse.js i root-katalogen för ansökan.

Vi börjar med att importera de plugins vi kommer att göra användningen av, alla de plugins som kommer från Säkringsdosan paket som vi har installerat.

const { Säkringsdosan, CSSPlugin, SVGPlugin, WebIndexPlugin } = require(“säkring-box”);

Nu ska vi initiera en Säkringsdosan exempel och berätta vad vi använder som hemkatalog och där för att sätta sammanställt tillgångar:

const säkring = Säkringsdosan.init({
homeDir: “src”,
effekt: “dist/$name.js”
});

Vi kommer att låta E vet att vi har för avsikt att använda TypeScript-kompilatorn:

const säkring = Säkringsdosan.init({
homeDir: “src”,
effekt: “dist/$name.js”,
useTypescriptCompiler: sant,
});

Vi identifierade plugins i den första raden i konfigurationsfilen, men nu har vi kallar dem. Vi använder plugins ganska mycket som det är, men definitivt kolla vad CSSPlugin, SVGPlugin och WebIndexPlugin har att erbjuda om du vill ha mer finkornig kontroll över de alternativ.

const säkring = Säkringsdosan.init({
homeDir: “src”,
effekt: “dist/$name.js”,
useTypescriptCompiler: sant,
plugins: [ // HIGHLIGHT
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mall: “src/index.html”
})
]
});

const { Säkringsdosan, CSSPlugin, SVGPlugin, WebIndexPlugin } = require(“säkring-box”);

const säkring = Säkringsdosan.init({
homeDir: “src”,
effekt: “dist/$name.js”,
useTypescriptCompiler: sant,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mall: “src/index.html”
})
]
});
säkring.dev();
säkring
.bunt(“app”)
.instruktioner(`>index.js`)
.hmr()
.klocka()

säkring.run();

Säkringsdosan låter oss konfigurera en utveckling server. Vi kan definiera portar, SSL-certifikat, och även öppnar programmet i en webbläsare på att bygga.

Vi kommer helt enkelt att använda den standard miljö för detta exempel:

säkring.dev();

Det är viktigt att definiera den utvecklingsmiljö *innan* bunt instruktioner som kommer nästa:

säkring
.bunt(“app”)
.instruktioner(`>index.js`)
.hmr()
.titta på().

Vad sjutton är detta? När vi initierats av Säkringsdosan exempel, har vi angett en utgång med dist/$name.js. Värdet för $namn är som tillhandahålls av paketet () – metoden. I vårt fall, vi sätter värde som app. Det innebär att när programmet levereras, produktionen destination kommer att vara dist/app.js.

Instruktionerna() metod som definierar hur Säkringsdosan bör ta itu med koden. I vårt fall, vi säger att det till att börja med index.js och för att köra den när den är laddad.

Hmr () – metod används för de fall där vi vill uppdaterar användaren när en fil ändras, detta innebär oftast att uppdatera webbläsaren när en fil ändras. Under tiden, titta på() re-buntar den medföljande kod efter varje sparad förändring.

Med det, vi ska kämpa genom att lansera byggprocessen med säkring.run() i slutet av filen. Här är allt vi bara täckt sätta ihop:

const { Säkringsdosan, CSSPlugin, SVGPlugin, WebIndexPlugin } = require(“säkring-box”);

const säkring = Säkringsdosan.init({
homeDir: “src”,
effekt: “dist/$name.js”,
useTypescriptCompiler: sant,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mall: “src/index.html”
})
]
});
säkring.dev();
säkring
.bunt(“app”)
.instruktioner(`>index.js`)
.hmr()
.klocka()

säkring.run();

Nu kan vi köra programmet från terminalen genom att köra node säkring. Detta kommer att börja bygga process som skapar dist mapp som innehåller den medföljande koden och den mall vi som anges i konfiguration. När byggprocessen är klar, vi kan peka webbläsaren för att http://localhost:4444/ för att se vår app.

Kör uppgifter med Sparky

Säkringsdosan finns en uppgift löpare som kan användas för att automatisera byggprocessen. Det kallas Sparky och du kan se det som sorta som Soldat och Gulp, med den skillnaden att det är byggt på toppen av Säkringsdosan med inbyggd tillgång till Säkringsdosan plugins och Säkringsdosan API.

Vi behöver inte använda den, men uppgiften löpare gör utvecklingen mycket enklare genom att automatisera saker som vi annars har att göra manuellt och är det vettigt att använda vad som är särskilt utformade för Säkringsdosan.

För att använda det, vi kommer att uppdatera konfiguration som vi har i fuse.js med utgångspunkt från en viss import som går till början av filen:

const { src uppgift, sammanhang } = require(“fuse-box/sparky”);

Nästa, vi ska definiera ett sammanhang som liknar det vi redan har. Vi är i grunden inslagning vad vi gjorde i ett sammanhang och setConfig(), för att sedan initiera Säkringsdosan i retur:

sammanhang({
setConfig() {
tillbaka Säkringsdosan.init({
homeDir: “src”,
effekt: “dist/$name.js”,
useTypescriptCompiler: sant,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
mall: “src/index.html”
})
]
});
},
createBundle(säkring) {
tillbaka säkring
.bunt(“app”)
.instruktioner(`> index.js`)
.hmr();
}
});

Det är möjligt att passera en klass, funktion eller vanligt objekt i ett sammanhang. I ovanstående scenario, vi passerar funktioner, särskilt setConfig() och createBundle(). setConfig() initierar Säkringsdosan och sätter upp plugins. createBundle() gör vad du kan förvänta sig av namnet, som är kombinationserbjudanden koden. Återigen, den skillnad från vad vi gjorde innan är att vi är inbäddning både funktioner i olika funktioner som finns i samband objekt.

Vi vill att vår uppgift löpare att springa uppgifter, rätt? Här är några exempel som vi kan definiera:

uppgift(“ren”, () => src(“dist”).ren(“dist”).exec());
uppgift(“default”, [“ren”], asynkron (sammanhang) => {
const säkring = sammanhanget.setConfig();
säkring.dev();
sammanhanget.createBundle(säkring);
väntar säkring.run()
});

Den första uppgiften kommer att vara ansvarig för rengöring av dist-katalogen. Det första argumentet är namnet på uppgiften, medan den andra är den funktion som anropas när aktiviteten körs.
Att kalla den första uppgiften, vi kan göra node säkring ren från terminalen.

När en uppgift är namnet standard (vilket är det första argumentet som i den andra uppgiften), denna uppgift kommer att vara den som får kallas som standard när du kör nod säkring — i det här fallet, det är den andra uppgiften i vår konfiguration. Andra uppgifter som behöver göras kommer att behöva kallas uttryckligen i terminalen, som nod säkring <task_name>.

Så, vår andra uppgift är standard och tre argument som förs in i den. Den första är namnet på uppgiften (“standard”), den andra ([“ren”) är en samling av beroenden som ska anropas innan uppgiften utförs, och den tredje är en funktion (säkring.dev()) som får initieras Säkringsdosan exempel och börjar buntning och byggprocessen.

Nu kan vi köra saker med nod säkring i terminalen. Du har möjlighet att lägga till dessa i ditt paket.json-filen om det är mer bekväma och bekanta dig. Skriptet avsnitt skulle se ut så här:

“skript”: {
“start”: “node säkring”,
“ren”: “node säkring clean”
},

Det är en wrap!

Allt som allt, Säkringsdosan är ett intressant alternativ till webpack för alla din ansökan kombinationserbjudanden behov. Som vi såg, att det erbjuder samma typ av makt som vi alla tenderar att tycka om webpack, men med en mycket mindre komplicerad konfiguration process som gör det mycket lättare att komma igång, tack vare inbyggd i Typescript-stöd, prestanda, och en uppgift löpare som är utformad för att dra fördel av Säkringsdosan API.

Vad vi tittar på var ett ganska enkelt exempel. I praktiken, du sannolikt kommer att vara att arbeta med mer komplexa applikationer, men principerna är de samma. Det är skönt att veta att Säkringsdosan klarar av mer än vad som bakas in i den, men att den inledande installationen är fortfarande super strömlinjeformad.

Om du letar efter mer information om Säkringsdosan, det är platsen och dokumentation är självklart bra utgångspunkt. följande länkar är också super bra för att få fler perspektiv på hur andra är att ställa upp den och använda den på projekt.

  • Att införa Säkringsdosan, ett alternativ till Webpack
  • WebPack är inte det enda sättet
  • Introduktion till Säkringsdosan (YouTube)