Eesti

Tutvu ülikiire ESBuildi JavaScripti pakendaja ja transformaatoriga. Õpi, kuidas see kiirendab ja optimeerib teie veebiarenduse töövoogu.

ESBuild: Ülikiire JavaScripti pakendaja ja transformaator

Kiirelt arenevas veebiarenduse maailmas on ehitusvahendid jõudluse optimeerimiseks ja töövoogude sujuvamaks muutmiseks hädavajalikud. ESBuild on tõusnud mängu muutjaks, pakkudes võrreldamatut kiirust ja tõhusust JavaScripti pakendamisel ja teisendamisel. See artikkel pakub põhjalikku juhendit ESBuildi kohta, uurides selle funktsioone, eeliseid ja praktilisi rakendusi arendajatele üle maailma.

Mis on ESBuild?

ESBuild on Go-keeles kirjutatud JavaScripti pakendaja ja transformaator. Selle peamine eesmärk on pakkuda oluliselt kiiremaid ehitusaegu võrreldes traditsiooniliste JavaScripti-põhiste pakendajatega nagu Webpack, Parcel ja Rollup. ESBuild saavutab selle kiiruse mitmete peamiste optimeeringute abil, sealhulgas:

ESBuild toetab laia valikut funktsioone, muutes selle mitmekülgseks tööriistaks kaasaegseks veebiarenduseks:

Miks kasutada ESBuildi?

ESBuildi kasutamise peamine eelis on selle kiirus. Ehitusajad on sageli oluliselt kiirem kui teiste pakendajatega. See kiirus tähendab:

Kiirusele lisaks pakub ESBuild ka teisi veenvaid eeliseid:

Alustamine ESBuildiga

ESBuildi kasutamise alustamiseks vajate oma süsteemis installitud Node.js ja npm (või Yarn).

Installimine

Installige ESBuild globaalselt või projektisõltuvusena:

npm install -g esbuild
# või
npm install --save-dev esbuild

Põhikasutus

ESBuildi kõige põhilisem kasutus on käsurealt:

esbuild input.js --bundle --outfile=output.js

See käsk pakendab input.js ja kõik selle sõltuvused ühte faili nimega output.js.

Konfiguratsioonifail (valikuline)

Keerukamate projektide jaoks saate luua konfiguratsioonifaili (nt esbuild.config.js), et määratleda oma ehitusvalikud:

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm', // või 'cjs' CommonJS jaoks
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

Seejärel käivitage ESBuild konfiguratsioonifailiga:

node esbuild.config.js

Täiustatud funktsioonid ja konfiguratsioon

ESBuild pakub laia valikut valikuid teie ehitusprotsessi kohandamiseks. Siin on mõned peamised funktsioonid ja konfiguratsioonivalikud:

Koodi jagamine

Koodi jagamine jagab teie rakenduse koodi väiksemateks tükkideks, mida saab nõudmisel laadida. See võib oluliselt parandada esmast lehe laadimisaega, vähendades allalaaditava ja parsitava JavaScripti kogust.

Koodi jagamise lubamiseks kasutage valikut format: 'esm' ja määrake väljundfailide kataloog:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

ESBuild loob automaatselt eraldi tükid teie rakenduse sisendipunktidele ja kõigile dünaamiliselt imporditud moodulitele.

Minimeerimine ja Tree Shaking

Minimeerimine vähendab koodi suurust, eemaldades tühikud, lühendades muutujanimed ja rakendades muid optimeeringuid. Tree shaking eemaldab surnud koodi (koodi, mida kunagi ei täideta), et veelgi paketi suurust vähendada.

Minimeerimise ja tree shakinigi lubamiseks kasutage valikut minify: true:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  treeShaking: true, // Vaikimisi lubatud, kui minify on lubatud
  sourcemap: true,
}).catch(() => process.exit(1));

Tree shaking on lubatud vaikimisi, kui minimeerimine on lubatud.

Pluginad

ESBuildi pluginasüsteem võimaldab laiendada selle funktsionaalsust kohandatud pluginatega. Pluginadega saab teha mitmesuguseid ülesandeid, näiteks:

Siin on näide lihtsast ESBuildi pluginast, mis asendab kõik __VERSION__ esinemised teie paketi praeguse versiooniga:

// version-plugin.js
const fs = require('fs');
const path = require('path');

function versionPlugin() {
  return {
    name: 'version-plugin',
    setup(build) {
      build.onLoad({ filter: /\.(js|ts|jsx|tsx)$/ }, async (args) => {
        const contents = await fs.promises.readFile(args.path, 'utf8');
        const packageJsonPath = path.resolve(process.cwd(), 'package.json');
        const packageJson = JSON.parse(await fs.promises.readFile(packageJsonPath, 'utf8'));
        const version = packageJson.version;
        const modifiedContents = contents.replace(/__VERSION__/g, version);
        return {
          contents: modifiedContents,
          loader: args.loader,
        };
      });
    },
  };
}

module.exports = versionPlugin;

Pluginaga kasutamiseks lisage see oma ESBuildi konfiguratsiooni:

// esbuild.config.js
const esbuild = require('esbuild');
const versionPlugin = require('./version-plugin');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [versionPlugin()],
}).catch(() => process.exit(1));

Sihtkeskkonnad

ESBuild võimaldab teil määrata sihtkeskkondi oma koodile. See tagab, et teie kood on ühilduv sihtrühmaks olevate brauserite või Node.js versioonidega. Erinevad piirkonnad ja kasutajabaasid kasutavad erinevaid brausereid ja versioone. See funktsioon on globaalse rakenduse arenduse jaoks kriitilise tähtsusega.

Sihtkeskkondade määramiseks kasutage valikut target:

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  target: ['es2015', 'chrome58', 'firefox57', 'safari11', 'edge16'],
}).catch(() => process.exit(1));

Selles näites teisendab ESBuild teie koodi, et see oleks ühilduv ES2015, Chrome 58, Firefox 57, Safari 11 ja Edge 16-ga.

ESBuild vs. Teised pakendajad

Kuigi ESBuild pakub märkimisväärseid kiiruse eeliseid, on oluline arvestada selle kompromisse võrreldes teiste pakendajatega nagu Webpack, Parcel ja Rollup.

Webpack

Webpack on väga konfigureeritav ja mitmekülgne pakendaja, millel on suur ja küps ökosüsteem. See pakub laia valikut funktsioone ja pluginaid, kuid selle keerukus võib olla sisenemise takistus. ESBuild on enamiku projektide jaoks tavaliselt palju kiirem kui Webpack, kuid Webpacki ulatuslik plugin ökosüsteem võib olla vajalik teatud kasutusjuhtude jaoks.

Parcel

Parcel on nullkonfiguratsiooniga pakendaja, mille eesmärk on pakkuda lihtsat ja intuitiivset arenduskogemust. See tuvastab ja pakendab automaatselt teie projekti ressursse, kuid selle konfigureeritavuse puudumine võib olla keerukate projektide jaoks piirav. ESBuild on üldiselt kiirem kui Parcel ja pakub rohkem konfiguratsioonivõimalusi.

Rollup

Rollup on pakendaja, mis on spetsiaalselt loodud JavaScripti raamatukogude loomiseks. See on suurepärane tree shakin'i ja väga optimeeritud pakettide loomisel. ESBuild on tavaliselt kiirem kui Rollup, eriti suuremate projektide puhul, ja pakub laiemat tuge erinevate failitüüpide ja funktsioonide jaoks.

Siin on tabel, mis võrdleb peamisi erinevusi:

Funktsioon ESBuild Webpack Parcel Rollup
Kiirus Väga kiire Mõõdukas Mõõdukas Kiire
Konfiguratsioon Mõõdukas Kõrge Madal Mõõdukas
Plugin Ökosüsteem Kasvav Küps Piiratud Mõõdukas
Kasutusjuhtumid Veebirakendused, Raamatukogud Veebirakendused Lihtsad Veebirakendused JavaScripti Raamatukogud

Praktilised näited ja kasutusjuhtumid

ESBuildi saab kasutada mitmesugustes veebiarenduse projektides. Siin on mõned praktilised näited ja kasutusjuhtumid:

React rakenduse ehitamine

ESBuildi saab kasutada React rakenduse pakendamiseks koos TypeScripti ja JSX toega. Siin on näide konfiguratsioonist:

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  jsxFactory: 'React.createElement',
  jsxFragment: 'React.Fragment',
  loader: {
    '.ts': 'tsx',
    '.js': 'jsx',
  },
}).catch(() => process.exit(1));

See konfiguratsioon käsib ESBuildil pakendada src/index.tsx fail, teisendada JSX ja TSX süntaks ning genereerida minimeeritud pakett koos lähtekaartidega.

Vue.js rakenduse ehitamine

Kuigi ESBuild ei toeta natiivselt Vue.js ühtse faili komponente (.vue faile), saate seda teha pluginaga nagu esbuild-plugin-vue3, et lisada neile tugi. Vue.js on populaarne paljudes maailma osades, näiteks Ida-Aasias.

// esbuild.config.js
const esbuild = require('esbuild');
const vuePlugin = require('esbuild-plugin-vue3');

esbuild.build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [vuePlugin()],
}).catch(() => process.exit(1));

See konfiguratsioon kasutab pluginat esbuild-plugin-vue3, et töödelda .vue faile ja pakendada teie Vue.js rakendust.

Node.js rakenduse ehitamine

ESBuildi saab kasutada ka Node.js rakenduste pakendamiseks. See võib olla kasulik ühtsete failide käivitatavate failide loomiseks või rakenduse käivitusaegade optimeerimiseks.

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  platform: 'node',
  format: 'cjs',
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

See konfiguratsioon käsib ESBuildil pakendada src/index.js fail Node.js platvormi jaoks, kasutades CommonJS mooduli formaati.

ESBuild erinevates piirkondades ja keskkondades

ESBuildi kiirus ja tõhusus muudavad selle väärtuslikuks tööriistaks veebiarendajatele kogu maailmas. Siin on mõned kaalutlused ESBuildi kasutamiseks erinevates piirkondades ja keskkondades:

Parimad tavad ESBuildi kasutamiseks

Et ESBuildist maksimumi saada, järgige neid parimaid tavasid:

Kokkuvõte

ESBuild on võimas ja tõhus JavaScripti pakendaja ja transformaator, mis võib teie veebiarenduse töövoogu oluliselt parandada. Selle kiirus, lihtsus ja kaasaegsed funktsioonid muudavad selle suurepäraseks valikuks igas suuruses projektidele. Järgides selles artiklis kirjeldatud parimaid tavasid, saate kasutada ESBuildi, et luua kiiremaid, tõhusamaid ja paremini hooldatavaid veebirakendusi kasutajatele kogu maailmas.

Olenemata sellest, kas ehitate väikest veebisaiti või suurt ettevõtte rakendust, ESBuild võib aidata teil optimeerida teie esiotsa arendusprotsessi ja pakkuda paremat kasutajakogemust. Selle kiirus ja tõhusus muudavad selle väärtuslikuks vahendiks iga veebiarendaja tööriistakomplektis. Kuna veebiarenduse maastik jätkuvalt areneb, on ESBuildil positsioon JavaScripti pakendamise ja teisendamise juhtiva valikuna, andes arendajatele võimaluse luua kiiremaid ja tõhusamaid veebirakendusi ülemaailmse publiku jaoks.

Kuna ESBuild jätkab arengut, jälgige kogukonna panuseid ja ametlikke värskendusi, et kasutada uusimaid funktsioone ja optimeeringuid. Püsides kursis ja aktiivselt ESBuildi ökosüsteemis osaledes saate tagada, et teie veebiarendusprojektid saavad kasu ESBuildi pakutavast tipptasemel jõudlusest ja võimalustest.