Snowpack: ES modulių pagrindu veikiantis kūrimo įrankis šiuolaikiniam žiniatinklio programavimui

Nuolat besikeičiančioje žiniatinklio kūrimo aplinkoje, greitesnio kūrimo laiko ir supaprastintos programuotojo patirties siekis yra nenumaldomas. Daugelį metų tokie įrankiai kaip „Webpack“, „Parcel“ ir „Rollup“ buvo „front-end“ kūrimo procesų kertiniai akmenys, apjungiantys „JavaScript“, CSS ir kitus išteklius produkcijai. Tačiau atsirado naujas varžovas, žadantis paradigmos pokytį: Snowpack. Sukurtas su moderniais ES moduliais savo pagrinde, „Snowpack“ siūlo iš esmės kitokį požiūrį į žiniatinklio programų kūrimą, teikdamas pirmenybę greičiui ir paprastumui, neaukojant galios.

Poreikio moderniems kūrimo įrankiams supratimas

Prieš pradedant gilintis į „Snowpack“, svarbu suprasti iššūkius, kuriuos siekia išspręsti modernūs kūrimo įrankiai. Augant žiniatinklio programų sudėtingumui, augo ir reikalavimai priklausomybių valdymui, kodo transpiliavimui (pvz., iš „TypeScript“ ar naujesnių „JavaScript“ funkcijų į senesnes, labiau suderinamas versijas), išteklių optimizavimui ir efektyviam pristatymui galutiniam vartotojui. Tradiciniai kūrimo įrankiai dažnai tai pasiekia per procesą, vadinamą paketavimu (angl. bundling). Paketavimas apima visų jūsų projekto „JavaScript“ failų, kartu su jų priklausomybėmis, sujungimą į minimalų failų skaičių, dažnai vieną ar kelis didelius „paketus“. Šis procesas, nors ir efektyvus, gali tapti dideliu kliuviniu kūrimo metu, dėl ko prailgėja kūrimo laikas.

Apsvarstykite tipinę kūrimo darbo eigą: atliekate nedidelį kodo pakeitimą, išsaugote failą, o tada laukiate, kol kūrimo įrankis iš naujo sukompiliuos visą jūsų programą ar didelę jos dalį. Šis iteracinis procesas, kartojamas šimtus kartų per dieną, gali smarkiai paveikti programuotojo produktyvumą ir sukelti nusivylimą. Be to, tradicinis paketavimas dažnai reikalauja sudėtingos konfigūracijos, kuri gali būti stačia mokymosi kreivė naujiems programuotojams ir nuolatinės priežiūros šaltinis patyrusiems.

Kas yra Snowpack?

„Snowpack“ yra itin našus, ES modulių pagrindu veikiantis (angl. ES Module-native) „front-end“ kūrimo įrankis. Jo pagrindinė filosofija yra išnaudoti natūralias modernių naršyklių galimybes tiesiogiai tvarkyti „JavaScript“ modulius, taip sumažinant poreikį dideliam išankstiniam paketavimui kūrimo metu. Šis požiūris turi keletą esminių pasekmių:

Jokio paketavimo kūrimo metu: Užuot paketavęs visą jūsų programą kūrimo metu, „Snowpack“ pateikia jūsų kodą tiesiai iš jūsų šaltinio failų. Kai importuojate modulį (pvz., import React from 'react';), „Snowpack“ tiesiog pateikia tą failą. Tada naršyklė pati tvarko modulio sprendimą ir įkėlimą, lygiai taip pat, kaip su bet kuriuo kitu žiniatinklio ištekliumi.
Itin greitas HMR (karštas modulių pakeitimas): Kadangi „Snowpack“ nereikia iš naujo pakuoti visos jūsų programos po kiekvieno pakeitimo, karštas modulių pakeitimas (HMR) tampa neįtikėtinai greitas. Kai pakeičiate failą, tik tas konkretus failas (ir jo tiesioginiai priklausomi elementai) turi būti iš naujo pateikti ir atnaujinti naršyklėje.
Priklausomybių išankstinis paketavimas: Nors „Snowpack“ vengia pakuoti jūsų programos kodą kūrimo metu, jis iš anksto supakuoja jūsų projekto priklausomybes (iš node_modules). Tai yra kritinė optimizacija, nes trečiųjų šalių bibliotekos dažnai parašytos įvairiais formatais („CommonJS“, UMD) ir gali būti neoptimizuotos ES modulių naudojimui. „Snowpack“ naudoja itin greitą pakuotoją, pvz., esbuild, kad konvertuotų šias priklausomybes į formatą, kurį naršyklės gali efektyviai importuoti, paprastai ES modulius. Šis išankstinis paketavimas vyksta tik vieną kartą, paleidžiant kūrimo serverį arba pasikeitus priklausomybėms, kas dar labiau prisideda prie greito paleidimo laiko.
Produkcijos versijos kūrimas: Produkcijai „Snowpack“ vis dar gali generuoti optimizuotus, supakuotus išteklius, naudojant jūsų pasirinktus pakuotojus, tokius kaip „Webpack“, „Rollup“ ar „esbuild“. Tai reiškia, kad gaunate geriausią iš abiejų pasaulių: žaibišką kūrimą ir labai optimizuotas produkcijos versijas.

Kaip Snowpack pasiekia savo greitį

„Snowpack“ greitis yra tiesioginis jo architektūrinio dizaino rezultatas, kuris ženkliai skiriasi nuo tradicinių pakuotojų. Išskaidykime pagrindinius veiksnius:

1. ESM-pirmumo požiūris

Modernios naršyklės natūraliai palaiko ES modulius. Tai reiškia, kad jos gali tiesiogiai importuoti „JavaScript“ failus naudodamos import ir export sakinius, nereikalaudamos kūrimo žingsnio, kad juos konvertuotų. „Snowpack“ tai priima, traktuodamas jūsų projekto šaltinio failus kaip natūralius ES modulius. Užuot juos supakavęs į monolitinį failą, „Snowpack“ juos pateikia atskirai. Naršyklės natūralus modulių krautuvas rūpinasi priklausomybių sprendimu ir kodo vykdymu.

Pavyzdys:

Apsvarstykite paprastą „React“ programą:

// src/App.js
import React from 'react';

function App() {
  return Hello, Snowpack!;
}

export default App;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

Su „Snowpack“, paleidus kūrimo serverį, jis pateiks src/index.js ir src/App.js kaip atskirus failus, kartu su pačia „React“ biblioteka (tikėtina, pateikta iš node_modules katalogo po išankstinio paketavimo). Naršyklė tvarko import sakinius.

2. Optimizuotas priklausomybių išankstinis paketavimas su „esbuild“

Kaip minėta, „Snowpack“ vis tiek turi tvarkyti priklausomybes iš node_modules. Daugelis šių bibliotekų yra platinamos kitais formatais nei ES moduliai. „Snowpack“ tai sprendžia naudodamas esbuild priklausomybių išankstiniam paketavimui. „Esbuild“ yra neįtikėtinai greitas „JavaScript“ pakuotojas ir minifikatorius, parašytas „Go“ kalba. Jis gali pasigirti greičiu, kuris yra keliais eilėmis didesnis nei pakuotojų, parašytų „JavaScript“. Pasinaudodamas „esbuild“, „Snowpack“ gali greitai paversti jūsų projekto priklausomybes natūraliais ES moduliais, užtikrindamas efektyvų įkėlimą naršyklėje.

Šis išankstinio paketavimo procesas yra protingas: jis vyksta tik toms priklausomybėms, kurioms reikalinga transformacija. Bibliotekos, kurios jau yra ES modulių formatu, gali būti pateikiamos tiesiogiai. Rezultatas – kūrimo aplinka, kurioje net dideli projektai su daugybe priklausomybių gali pasileisti ir atsinaujinti beveik akimirksniu.

3. Minimali transformacija kūrimo metu

Skirtingai nuo „Webpack“, kuris dažnai atlieka išsamias transformacijas, tokias kaip „Babel“ transpiliacija, minifikacija ir paketavimas po kiekvieno pakeitimo kūrimo metu, „Snowpack“ siekia atlikti kuo mažiau. Jis daugiausia dėmesio skiria:

Jūsų šaltinio failų pateikimui tokie, kokie jie yra (arba su minimaliomis būtinomis transformacijomis, pvz., JSX į JS).
Priklausomybių išankstiniam paketavimui su „esbuild“.
Statinių išteklių tvarkymui.

Tai žymiai sumažina skaičiavimo išlaidas kūrimo ciklo metu. Kai redaguojate failą, „Snowpack“ kūrimo serveris gali greitai iš naujo pateikti tik tą failą, sukeldamas HMR atnaujinimą naršyklėje, nieko kito nekuriant iš naujo.

4. Efektyvios produkcijos versijos

„Snowpack“ neverčia jūsų laikytis konkrečios paketavimo strategijos produkcijai. Jis suteikia integracijas su populiariais produkcijos pakuotojais:

Webpack: „Snowpack“ gali generuoti „Webpack“ konfigūraciją pagal jūsų projektą.
Rollup: Panašiai, jis gali sukurti „Rollup“ konfigūraciją.
esbuild: Itin greitoms produkcijos versijoms, galite konfigūruoti „Snowpack“ naudoti „esbuild“ tiesiogiai galutiniam paketavimui ir minifikacijai.

Šis lankstumas leidžia programuotojams pasirinkti produkcijos kūrimo įrankį, kuris geriausiai atitinka jų poreikius, ar tai būtų maksimalus suderinamumas, pažangus kodo padalijimas, ar tiesiog kūrimo greitis.

Pagrindinės „Snowpack“ savybės ir privalumai

„Snowpack“ siūlo patrauklų funkcijų rinkinį, kuris daro jį patraukliu pasirinkimu moderniam žiniatinklio programavimui:

Neįtikėtinas kūrimo greitis: Tai, be abejonės, didžiausias „Snowpack“ privalumas. Beveik momentinis serverio paleidimas ir HMR atnaujinimai dramatiškai pagerina programuotojo patirtį ir produktyvumą.
ESM-Native: Išnaudoja modernias naršyklių galimybes švaresnei ir efektyvesnei darbo eigai.
Sistema nepriklausoma nuo karkaso: „Snowpack“ yra sukurtas veikti su bet kuriuo „JavaScript“ karkasu ar biblioteka, įskaitant „React“, „Vue“, „Svelte“, „Angular“ ir gryną „JavaScript“.
Išplečiama įskiepių sistema: „Snowpack“ turi tvirtą įskiepių sistemą, kuri leidžia integruotis su įvairiais įrankiais transpiliacijai („Babel“, „TypeScript“), CSS apdorojimui („PostCSS“, „Sass“) ir kt.
Greitos produkcijos versijos: Integracijos su „Webpack“, „Rollup“ ir „esbuild“ užtikrina, kad galėsite sukurti labai optimizuotus paketus diegimui.
Supaprastinta konfigūracija: Palyginti su daugeliu tradicinių pakuotojų, „Snowpack“ konfigūracija dažnai yra paprastesnė, ypač įprastiems naudojimo atvejams.
Palaiko kelis failų tipus: Tvarko „JavaScript“, „TypeScript“, JSX, CSS, „Sass“, „Less“ ir statinius išteklius iškart arba su minimalia konfigūracija.

Kaip pradėti dirbti su „Snowpack“

Sukurti naują projektą su „Snowpack“ yra stebėtinai paprasta. Galite naudoti CLI įrankį arba inicijuoti projektą rankiniu būdu.

Naujo projekto kūrimas naudojant CLI

Lengviausias būdas pradėti yra naudojant projekto inicializatorių, pvz., create-snowpack-app:

# Naudojant npm
npm init snowpack-app my-snowpack-app

# Naudojant Yarn
yarn create snowpack-app my-snowpack-app

Ši komanda paragins jus pasirinkti šabloną (pvz., „React“, „Vue“, „Preact“ ar pagrindinę „TypeScript“ sąranką). Sukūrus, galite pereiti į katalogą ir paleisti kūrimo serverį:

cd my-snowpack-app
npm install
npm start
# arba
yarn install
yarn start

Jūsų programa veiks kūrimo serveryje, ir jūs iškart pastebėsite greitį.

Rankinis nustatymas

Jei pageidaujate labiau rankinio požiūrio, galite įdiegti „Snowpack“ kaip kūrimo priklausomybę:

# Įdiekite Snowpack ir esmines kūrimo priklausomybes
npm install --save-dev snowpack

# Įdiekite pakuotoją produkcijai (pvz., Webpack)
npm install --save-dev webpack webpack-cli html-webpack-plugin

Tada sukurtumėte snowpack.config.js failą, kad sukonfigūruotumėte „Snowpack“. Minimali konfigūracija galėtų atrodyti taip:

// snowpack.config.js
module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
  ],
  packageOptions: {
    // Užtikrinkite, kad priklausomybės nebūtų supakuotos Snowpack, jei norite jas tvarkyti patys
    // arba jei jos jau yra ESM formatu.
    // Daugeliu atvejų leisti Snowpack iš anksto supakuoti priklausomybes yra naudinga.
  },
  devOptions: {
    // Įjunkite HMR
    open: 'true',
  },
  buildOptions: {
    // Konfigūruokite produkcijos kūrimo parinktis, pvz., naudojant Webpack
    out: 'build',
    // Čia galite pridėti įskiepį, kad paleistumėte Webpack ar kitą pakuotoją
    // Pavyzdžiui, jei naudojate @snowpack/plugin-webpack
  },
};

Taip pat reikėtų konfigūruoti skriptus jūsų package.json faile:


{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  }
}

Produkcijos versijoms, paprastai konfigūruotumėte „Snowpack“, kad iškviestų jūsų pasirinktą pakuotoją. Pavyzdžiui, naudojant @snowpack/plugin-webpack įskiepį, būtų sugeneruota „Webpack“ konfigūracija jūsų produkcijos ištekliams.

„Snowpack“ palyginimas su kitais kūrimo įrankiais

Naudinga palyginti „Snowpack“ su jo pirmtakais ir amžininkais:

„Snowpack“ ir „Webpack“

Kūrimo greitis: „Snowpack“ yra žymiai greitesnis kūrimo metu dėl savo ESM-native požiūrio ir minimalios transformacijos. „Webpack“ paketavimo procesas, nors ir galingas, gali lemti lėtesnį paleidimo ir HMR laiką, ypač didesniuose projektuose.
Konfigūracija: „Webpack“ yra žinomas dėl savo išsamių ir kartais sudėtingų konfigūracijos parinkčių. „Snowpack“ paprastai siūlo paprastesnę konfigūraciją iškart, nors jį taip pat galima išplėsti įskiepiais.
Paketavimas: Pagrindinė „Webpack“ stiprybė yra jo tvirtos paketavimo galimybės produkcijai. „Snowpack“ *naudoja* pakuotojus, tokius kaip „Webpack“ ar „Rollup“ produkcijai, o ne juos visiškai pakeičia.

„Snowpack“ ir „Parcel“

Konfigūracija: „Parcel“ dažnai pristatomas kaip „nulinės konfigūracijos“ įrankis, kuris puikiai tinka greitai pradžiai. „Snowpack“ taip pat siekia paprastumo, tačiau gali prireikti šiek tiek daugiau konfigūracijos pažangesnėms sąrankoms.
Kūrimo požiūris: „Parcel“ taip pat siūlo greitą kūrimą, dažnai pasitelkiant protingą kaupimą (caching) ir inkrementinius kūrimus. Tačiau „Snowpack“ grynas ESM-native požiūris kūrimo metu gali būti dar našesnis tam tikroms darbo apkrovoms.

„Snowpack“ ir „Vite“

„Vite“ yra kitas modernus kūrimo įrankis, turintis daug filosofinių panašumų su „Snowpack“, ypač jo priklausomybę nuo natūralių ES modulių ir greito kūrimo serverio. Tiesą sakant, „Snowpack“ kūrėjas Fredas Schottas vėliau sukūrė „Vite“. „Vite“ naudoja „esbuild“ priklausomybių išankstiniam paketavimui ir naudoja natūralius ES modulius šaltinio kodui kūrimo metu. Abu įrankiai siūlo puikų našumą.

Pagrindinė technologija: Nors abu yra ESM-native, „Vite“ pagrindinis pakuotojas priklausomybėms yra „esbuild“. „Snowpack“ taip pat naudoja „esbuild“, tačiau siūlo daugiau lankstumo renkantis produkcijos pakuotoją.
Bendruomenė ir ekosistema: Abu turi stiprias bendruomenes. „Vite“ sulaukė didelio populiarumo ir dabar yra numatytasis kūrimo įrankis tokiems karkasams kaip „Vue.js“. „Snowpack“, nors vis dar aktyviai kuriamas ir naudojamas, gali turėti šiek tiek mažesnę, nors ir atsidavusią, vartotojų bazę.
Fokusas: Pagrindinis „Snowpack“ skirtumas yra jo gebėjimas integruotis su esamais produkcijos pakuotojais, tokiais kaip „Webpack“ ar „Rollup“. „Vite“ turi savo integruotas produkcijos paketavimo galimybes, naudodamas „Rollup“.

Pasirinkimas tarp „Snowpack“ ir „Vite“ dažnai priklauso nuo konkrečių projekto poreikių ir ekosistemos pageidavimų. Abu atstovauja greitų „front-end“ kūrimo procesų ateitį.

Pažangūs naudojimo atvejai ir įskiepiai

„Snowpack“ lankstumas apima ir sudėtingesnius scenarijus per jo įskiepių sistemą. Štai keletas įprastų pavyzdžių:

„TypeScript“ palaikymas

„Snowpack“ apima integruotą „TypeScript“ įskiepį, kuris automatiškai transpiliuoja jūsų „TypeScript“ kodą į „JavaScript“ kūrimo metu. Produkcijai, paprastai integruotumėte jį su produkcijos pakuotoju, kuris taip pat tvarko „TypeScript“.

Norėdami įjungti „TypeScript“, įdiekite įskiepį:

npm install --save-dev @snowpack/plugin-typescript
# arba
yarn add --dev @snowpack/plugin-typescript

Ir pridėkite jį į savo snowpack.config.js:


module.exports = {
  // ... kitos konfigūracijos
  plugins: [
    '@snowpack/plugin-typescript',
    // ... kiti įskiepiai
  ],
};

JSX ir „React“ palaikymas

Tokiems karkasams kaip „React“, kurie naudoja JSX, „Snowpack“ siūlo įskiepius, skirtus transpiliacijai.

Įdiekite „React Refresh“ įskiepį greitam HMR:

npm install --save-dev @snowpack/plugin-react-refresh
# arba
yarn add --dev @snowpack/plugin-react-refresh

Pridėkite jį į savo konfigūraciją:


module.exports = {
  // ... kitos konfigūracijos
  plugins: [
    '@snowpack/plugin-react-refresh',
    // ... kiti įskiepiai
  ],
};

CSS pirminis apdorojimas („Sass“, „Less“)

„Snowpack“ palaiko CSS pirminius procesorius, tokius kaip „Sass“ ir „Less“, per įskiepius. Jums reikės įdiegti atitinkamą įskiepį ir patį pirminį procesorių.

„Sass“ atveju:

npm install --save-dev @snowpack/plugin-sass sass
# arba
yarn add --dev @snowpack/plugin-sass sass

Ir pridėkite įskiepį:


module.exports = {
  // ... kitos konfigūracijos
  plugins: [
    '@snowpack/plugin-sass',
    // ... kiti įskiepiai
  ],
};

Tada galėsite importuoti savo „Sass“ failus tiesiai į savo „JavaScript“ modulius.

Integracija su produkcijos pakuotojais

Ruošiantis produkcijai, „Snowpack“ gali generuoti konfigūracijas kitiems pakuotojams.

„Webpack“ integracija

Įdiekite „Webpack“ įskiepį:

npm install --save-dev @snowpack/plugin-webpack
# arba
yarn add --dev @snowpack/plugin-webpack

Pridėkite jį prie savo įskiepių ir sukonfigūruokite buildOptions, kad nurodytumėte išvesties katalogą:


module.exports = {
  // ... kitos konfigūracijos
  plugins: [
    '@snowpack/plugin-webpack',
    // ... kiti įskiepiai
  ],
  buildOptions: {
    out: 'build',
    // Naudojant @snowpack/plugin-webpack, jis dažnai numanomai tvarko kūrimo komandą.
    // Gali prireikti konfigūruoti specifines webpack parinktis čia arba atskirame webpack.config.js faile.
  },
};

Kai paleisite snowpack build su šiuo įskiepiu, jis sugeneruos reikiamą „Webpack“ konfigūraciją ir įvykdys „Webpack“, kad sukurtų jūsų produkcijos paketus.

Geriausios praktikos naudojant „Snowpack“

Norėdami maksimaliai išnaudoti „Snowpack“ privalumus, apsvarstykite šias geriausias praktikas:

Priimkite ES modulius: Rašykite savo projekto kodą naudodami natūralius ES modulius, kur tik įmanoma. Tai puikiai dera su „Snowpack“ filosofija.
Išlaikykite priklausomybes kuo mažesnes: Nors „Snowpack“ efektyviai tvarko priklausomybes, mažesnis priklausomybių medis paprastai lemia greitesnį kūrimo laiką ir mažesnį paketo dydį.
Išnaudokite HMR: Pasikliaukite greitu „Snowpack“ HMR, kad greitai iteruotumėte savo vartotojo sąsają ir komponentus.
Apgalvotai konfigūruokite produkcijos versijas: Pasirinkite produkcijos pakuotoją, kuris geriausiai atitinka jūsų projekto optimizavimo, kodo padalijimo ir suderinamumo poreikius.
Supraskite dvi fazes: Atminkite, kad „Snowpack“ turi aiškiai atskirtą kūrimo režimą (ESM-native) ir produkcijos režimą (paketavimas per įskiepius).
Būkite atnaujinti: Kūrimo įrankių aplinka greitai keičiasi. Atnaujinkite savo „Snowpack“ versiją ir įskiepius, kad pasinaudotumėte našumo patobulinimais ir naujomis funkcijomis.

Pasaulinis pritaikymas ir bendruomenė

„Snowpack“ sulaukė didelio pripažinimo pasaulinėje žiniatinklio kūrimo bendruomenėje. Programuotojai visame pasaulyje vertina jo greitį ir patobulintą programuotojo patirtį. Jo nepriklausomumas nuo karkaso reiškia, kad jis pritaikomas įvairiuose projektuose, nuo mažų asmeninių svetainių iki didelių įmonių programų. Bendruomenė aktyviai prisideda kurdama įskiepius ir dalindamasi geriausiomis praktikomis, taip puoselėdama gyvybingą ekosistemą.

Dirbant su tarptautinėmis komandomis, „Snowpack“ paprasta konfigūracija ir greitas grįžtamasis ryšys gali būti ypač naudingi, užtikrinant, kad programuotojai iš skirtingų regionų ir su skirtingu techniniu pasirengimu galėtų greitai įsijungti į darbą ir išlikti produktyvūs.

Išvada

„Snowpack“ yra reikšmingas žingsnis į priekį „front-end“ kūrimo įrankių srityje. Priimdamas natūralias ES modulių galimybes ir pasitelkdamas neįtikėtinai greitus įrankius, tokius kaip „esbuild“, jis siūlo kūrimo patirtį, pasižyminčią neprilygstamu greičiu ir paprastumu. Nesvarbu, ar kuriate naują programą nuo nulio, ar norite optimizuoti esamą darbo eigą, „Snowpack“ suteikia galingą ir lankstų sprendimą.

Jo gebėjimas integruotis su nusistovėjusiais produkcijos pakuotojais, tokiais kaip „Webpack“ ir „Rollup“, užtikrina, kad nereikės daryti kompromisų dėl jūsų produkcijos versijų kokybės ar optimizavimo. Toliau besivystant žiniatinkliui, įrankiai kaip „Snowpack“, kurie teikia pirmenybę našumui ir programuotojo patirčiai, neabejotinai atliks vis svarbesnį vaidmenį formuojant modernų žiniatinklio programavimą.

Jei dar neišbandėte „Snowpack“, dabar yra puikus metas tai padaryti ir patirti skirtumą, kurį tikrai modernus, ES modulių pagrindu veikiantis kūrimo įrankis gali padaryti jūsų kūrimo procese.