M

MLOG

Lietuvių

Atraskite ESBuild – žaibiškai greitą JavaScript paketų kūrėją. Sužinokite, kaip jis optimizuoja jūsų interneto kūrimo eigą greičiui, efektyvumui ir našumui.

ESBuild: Itin greitas JavaScript paketavimas ir transformavimas

Sparčiai besikeičiančiame interneto kūrimo pasaulyje, kūrimo įrankiai yra būtini našumui optimizuoti ir darbo eigoms supaprastinti. ESBuild tapo revoliuciniu pokyčiu, siūlančiu neprilygstamą greitį ir efektyvumą JavaScript paketavime ir transformavime. Šiame straipsnyje pateikiamas išsamus ESBuild vadovas, nagrinėjantis jo funkcijas, privalumus ir praktinį pritaikymą kūrėjams visame pasaulyje.

Kas yra ESBuild?

ESBuild yra JavaScript paketų kūrėjas ir transformuotojas, parašytas Go kalba. Jo pagrindinis tikslas yra pasiūlyti ženkliai greitesnį kūrimo laiką, palyginti su tradiciniais JavaScript pagrindu veikiančiais paketų kūrėjais, tokiais kaip Webpack, Parcel ir Rollup. ESBuild pasiekia šį greitį per kelias pagrindines optimizacijas, įskaitant:

ESBuild palaiko platų funkcijų spektrą, todėl tai yra universalus įrankis moderniam interneto kūrimui:

Kodėl verta naudoti ESBuild?

Pagrindinis ESBuild naudojimo privalumas yra jo greitis. Kūrimo laikas dažnai yra žymiai greitesnis nei su kitais paketų kūrėjais. Šis greitis virsta:

Be greičio, ESBuild siūlo ir kitų įtikinamų pranašumų:

Darbo su ESBuild pradžia

Norėdami pradėti naudoti ESBuild, jūsų sistemoje turi būti įdiegta Node.js ir npm (arba Yarn).

Diegimas

Įdiekite ESBuild globaliai arba kaip projekto priklausomybę:

npm install -g esbuild
# or
npm install --save-dev esbuild

Pagrindinis naudojimas

Paprasčiausias būdas naudoti ESBuild yra iš komandinės eilutės:

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

Ši komanda sujungia input.js ir visas jo priklausomybes į vieną failą, pavadintą output.js.

Konfigūracijos failas (nebūtina)

Sudėtingesniems projektams galite sukurti konfigūracijos failą (pvz., esbuild.config.js), kad apibrėžtumėte savo kūrimo parinktis:

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

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

Tada paleiskite ESBuild su konfigūracijos failu:

node esbuild.config.js

Pažangios funkcijos ir konfigūracija

ESBuild suteikia platų parinkčių spektrą jūsų kūrimo procesui pritaikyti. Štai keletas pagrindinių funkcijų ir konfigūracijos parinkčių:

Kodo skaidymas (Code Splitting)

Kodo skaidymas padalija jūsų programos kodą į mažesnes dalis, kurias galima įkelti pagal poreikį. Tai gali žymiai pagerinti pradinį puslapio įkėlimo laiką, sumažinant JavaScript kiekį, kurį reikia atsisiųsti ir apdoroti iš anksto.

Norėdami įjungti kodo skaidymą, naudokite format: 'esm' parinktį ir nurodykite išvesties failų katalogą:

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

ESBuild automatiškai sukurs atskiras dalis jūsų programos įvesties taškams ir bet kokiems dinamiškai importuotiems moduliams.

Minifikavimas ir „Tree Shaking“

Minifikavimas sumažina kodo dydį pašalinant tarpus, sutrumpinant kintamųjų pavadinimus ir taikant kitas optimizacijas. „Tree shaking“ pašalina nenaudojamą kodą (kodą, kuris niekada nevykdomas), kad dar labiau sumažintų paketo dydį.

Norėdami įjungti minifikavimą ir „tree shaking“, naudokite minify: true parinktį:

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

„Tree shaking“ yra įjungtas pagal numatytuosius nustatymus, kai įjungtas minifikavimas.

Įskiepiai (Plugins)

ESBuild įskiepių sistema leidžia išplėsti jo funkcionalumą naudojant pasirinktinius įskiepius. Įskiepiai gali būti naudojami atlikti įvairias užduotis, tokias kaip:

Štai paprasto ESBuild įskiepio pavyzdys, kuris pakeičia visus __VERSION__ pasikartojimus į dabartinę jūsų paketo versiją:

// 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;

Norėdami naudoti įskiepį, įtraukite jį į savo ESBuild konfigūraciją:

// 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));

Taikinio aplinkos (Target Environments)

ESBuild leidžia nurodyti taikinio aplinkas jūsų kodui. Tai užtikrina, kad jūsų kodas bus suderinamas su naršyklėmis ar Node.js versijomis, į kurias orientuojatės. Skirtingi regionai ir vartotojų bazės naudos skirtingas naršykles ir versijas. Ši funkcija yra kritiškai svarbi kuriant globalias programas.

Naudokite target parinktį, kad nurodytumėte taikinio aplinkas:

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));

Šiame pavyzdyje ESBuild transformuos jūsų kodą, kad jis būtų suderinamas su ES2015, Chrome 58, Firefox 57, Safari 11 ir Edge 16.

ESBuild palyginimas su kitais paketų kūrėjais

Nors ESBuild siūlo didelius greičio pranašumus, svarbu apsvarstyti jo kompromisus, palyginti su kitais paketų kūrėjais, tokiais kaip Webpack, Parcel ir Rollup.

Webpack

Webpack yra labai konfigūruojamas ir universalus paketų kūrėjas su didele ir brandžia ekosistema. Jis siūlo platų funkcijų ir įskiepių spektrą, tačiau jo sudėtingumas gali būti kliūtis pradedantiesiems. ESBuild paprastai yra daug greitesnis nei Webpack daugumai projektų, tačiau Webpack plati įskiepių ekosistema gali būti būtina tam tikrais atvejais.

Parcel

Parcel yra nulinės konfigūracijos paketų kūrėjas, siekiantis suteikti paprastą ir intuityvią kūrimo patirtį. Jis automatiškai aptinka ir supakuoja jūsų projekto resursus, tačiau jo konfigūravimo trūkumas gali būti ribojantis sudėtingiems projektams. ESBuild paprastai yra greitesnis nei Parcel ir siūlo daugiau konfigūravimo parinkčių.

Rollup

Rollup yra paketų kūrėjas, specialiai sukurtas JavaScript bibliotekoms kurti. Jis puikiai atlieka „tree shaking“ ir generuoja labai optimizuotus paketus. ESBuild paprastai yra greitesnis nei Rollup, ypač didesniems projektams, ir siūlo išsamesnį palaikymą skirtingiems failų tipams ir funkcijoms.

Štai lentelė, apibendrinanti pagrindinius skirtumus:

Savybė ESBuild Webpack Parcel Rollup
Greitis Labai greitas Vidutinis Vidutinis Greitas
Konfigūracija Vidutinė Aukšta Žema Vidutinė
Įskiepių ekosistema Auganti Brandi Ribota Vidutinė
Panaudojimo sritys Interneto programos, bibliotekos Interneto programos Paprastos interneto programos JavaScript bibliotekos

Praktiniai pavyzdžiai ir panaudojimo atvejai

ESBuild gali būti naudojamas įvairiuose interneto kūrimo projektuose. Štai keletas praktinių pavyzdžių ir panaudojimo atvejų:

React programos kūrimas

ESBuild galima naudoti React programai su TypeScript ir JSX palaikymu supakuoti. Štai konfigūracijos pavyzdys:

// 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));

Ši konfigūracija nurodo ESBuild supakuoti src/index.tsx failą, transformuoti JSX ir TSX sintaksę ir sugeneruoti minifikuotą paketą su šaltinio žemėlapiais.

Vue.js programos kūrimas

Nors ESBuild natūraliai nepalaiko Vue.js vieno failo komponentų (.vue failų), galite naudoti įskiepį, pvz., esbuild-plugin-vue3, kad pridėtumėte jų palaikymą. Vue.js yra populiarus daugelyje pasaulio šalių, pavyzdžiui, Rytų Azijoje.

// 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));

Ši konfigūracija naudoja esbuild-plugin-vue3 įskiepį, kad apdorotų .vue failus ir supakuotų jūsų Vue.js programą.

Node.js programos kūrimas

ESBuild taip pat galima naudoti Node.js programoms supakuoti. Tai gali būti naudinga kuriant vieno failo vykdomuosius failus arba optimizuojant jūsų programos paleidimo laiką.

// 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));

Ši konfigūracija nurodo ESBuild supakuoti src/index.js failą Node.js platformai, naudojant CommonJS modulio formatą.

ESBuild skirtinguose regionuose ir aplinkose

ESBuild greitis ir efektyvumas daro jį vertingu įrankiu interneto kūrėjams visame pasaulyje. Štai keletas svarstymų, kaip naudoti ESBuild skirtinguose regionuose ir aplinkose:

Gerosios praktikos naudojant ESBuild

Norėdami išnaudoti visas ESBuild galimybes, laikykitės šių gerųjų praktikų:

Išvada

ESBuild yra galingas ir efektyvus JavaScript paketų kūrėjas ir transformuotojas, kuris gali žymiai pagerinti jūsų interneto kūrimo darbo eigą. Jo greitis, paprastumas ir modernios funkcijos daro jį puikiu pasirinkimu įvairaus dydžio projektams. Laikydamiesi šiame straipsnyje aprašytų gerųjų praktikų, galite išnaudoti ESBuild kurdami greitesnes, efektyvesnes ir lengviau prižiūrimas interneto programas vartotojams visame pasaulyje.

Nesvarbu, ar kuriate mažą svetainę, ar didelę verslo programą, ESBuild gali padėti optimizuoti jūsų front-end kūrimo procesą ir suteikti geresnę vartotojo patirtį. Jo greitis ir efektyvumas daro jį vertingu turtu bet kurio interneto kūrėjo įrankių rinkinyje. Kadangi interneto kūrimo aplinka nuolat tobulėja, ESBuild yra pasirengęs išlikti pagrindiniu pasirinkimu JavaScript paketavimui ir transformavimui, suteikdamas kūrėjams galimybę kurti greitesnes ir efektyvesnes interneto programas pasaulinei auditorijai.

Kadangi ESBuild ir toliau tobulėja, stebėkite bendruomenės indėlį ir oficialius atnaujinimus, kad išnaudotumėte naujausias funkcijas ir optimizacijas. Būdami informuoti ir aktyviai dalyvaudami ESBuild ekosistemoje, galite užtikrinti, kad jūsų interneto kūrimo projektai gautų naudos iš pažangiausio našumo ir galimybių, kurias suteikia ESBuild.