Az ES6 környezet gyors telepítése

Mint tudhatja, a böngészők kezdik felzárkózni az ES6-hoz. Azonban nem minden működik olyan simán, mint várták, és ez időigényes és unalmas probléma lehet. Ha valami elromlik, próbálja meg azonosítani, hogy a probléma a kódban rejlik-e, vagy a böngésző nem könnyű folyamat.

De ne aggódjon, megmutatom, hogyan lehet gyorsan telepíteni és írni az ES6 kódot, és ami a legfontosabb, hogy kompatibilis legyen az összes olyan böngészővel, amely támogatja az ES5-öt.

ES5-ES6

Az ES6 kód megírásához telepítenünk kell valamit, amely képes fordítani az ES5-re. Mi lesz ezzel, Rollup. Kis kóddarabokat állít össze valami nagyobb és összetettebbé, például könyvtárba vagy alkalmazásba. Ez lehetővé teszi az OOP (objektum-orientált programozás) használatát, amely a kódot tisztább, strukturáltabb és modulárisabbá teszi, valamint egyéb hasznos funkciókat. Tisztázandó, hogy a JS objektum-orientált, de nem olyan osztály-alapú objektum-orientált nyelv, mint a Java, C ++, C # stb., Az ES6 kiadásáig.

Ellenkező esetben az O5-hez az ES5-ös osztályok felvétele szempontjából legközelebb az IIFE (azonnali hívott funkciókifejezés) használata vagy a külső könyvtárak telepítése állhat. De miért támaszkodhat a külső erőforrásokra, ha van olyan alapnyelve, amely támogatja az OOP paradigmáját? A legszélesebb körben használt programozási nyelvek közül sokan már támogatják (például a C ++, a Java, a C # és a PHP).

Miért ES6?

Személy szerint azért használom, mert lehetővé teszi a kódom külön fájlokba rendezését, ami megkönnyíti a kód méretezését és karbantartását.

Például a HTML-fájlomban van egy, scriptamely betölt main.js, és belül main.jstöbb JSfájlt importés exportutasításokat használok . Ahelyett, hogy több szkript lenne a HTML fájlomban, csak egyre van szükségem (kevesebb kódra).

Előfeltételek

  • Linux vagy macOS (Debian alapú)
  • NPM (csomagkezelő) telepítve
  • Alapszintű CLI ismeretek

Első lépés: Telepítse a Rollup alkalmazást

A használat érdekében Rollupglobálisan kell telepítenünk. Ne felejtse el használni sudo. Ez lehetővé teszi a Rollupparancsok elérését bármilyen projektben, amellyel dolgozik.

Második lépés: A fájl felépítése

Miután telepítette Rollupvilágszerte, a következő lépés az, hogy a telepítést ki a mappa struktúra, és hozzon létre két mappát srcés destbenne a projekt. Ezen kívül hozzon létre index.html.

  • src → ES6 fájlok (hova írja a kódot)
  • dest → ES5-t generál (az ES6 összeállított verziói)

Ne feledje, hogy a bundle.jsfájl automatikusan generálódik a Rollupparancs végrehajtásakor. Erről később beszélünk.

Harmadik lépés: Hozzon létre egy konfigurációs fájlt

Hozzon létre egy új fájlt, és nevezze el rollup.config.js. Ezután adja hozzá ezt a kódot:

Győződjön meg arról, hogy a inputés a outputforrás elérési útja megfelel a mappaszerkezetnek, és hogy ez a fájl a fő mappába kerül.

Negyedik lépés: Töltse be a szkript fájlt HTML-be

Már majdnem készen állunk, de először a HTML-sablonunkban a megfelelő forrásfájlra kell hivatkoznunk. Ez betölti az ES5 fájlt, amelyet az ES6-ból fordítottak le.

Ötödik lépés: Állítsa be a JS fájlokat

A Rollupparancs működésének ellenőrzéséhez be kell állítanunk egy egyszerű OOP struktúrát. Létrehozunk egy car.jsosztályt, és default exportazt main.js.

Ne feledje, hogy ez a fájl az car.jsosztály új példányát exportálja , és ez lehetővé teszi a metódusok közvetlen elérését ahelyett, hogy const car = new Car()az main.jsosztályba írna .

Mivel lusta szoftvermérnök vagyok, ezért időigényes néhány extra kódkóddal foglalkozni :)

Ezután importálja az car.jsosztályt ide main.jsa metódus eléréséhez type().

Hatodik lépés: Fordítsa le az ES6-ot az ES5-re

Az általunk létrehozott konfigurációs fájl végrehajtásához futtassa ezt a parancsot, $ rollup -cvagy $ rollup --config- mindkettő ugyanaz.

Futtatása után az egyik parancsok, nyílt index.htmlböngészőn keresztül, majd nyissa vizsgálja ( ctrl + shift + I) a böngésző, és menj console. Ha látja a szöveget "Tesla Model S", az azt jelenti, hogy minden sikeresen működött.

Ne feledje, hogy minden alkalommal, amikor módosításokat végez az ES6 fájlokkal, frissítenie kell a parancs futtatásával.

Választható

Mivel Rollupglobálisan telepítetted , lefordíthatod az ES6-ot anélkül, hogy szükséged lenne a fájlra rollup.config.js. Pontosan ugyanazt csinálja:

$ rollup src/main.js — o dest/bundle.js — f iife

Személy szerint azt javaslom, hogy fusson $ rollup -ca hatodik lépés szerint, mivel kevesebb kódra van szükség. Ne feledje, hogy rollup.config.js a parancs futtatásakor a fájlnak tartalmaznia kell .

Ha hasznosnak találta ezt a rövid telepítési megközelítést az ES6-hoz, kérjük, tegye meg észrevételeit és tapsoljon. Ez jó karma.