Začnite z Babel 7

Pojdi z Babel 7

JavaScript je edinstven zaradi širine ekosistema. Medtem ko novi standardi dodajajo skladenjski sladkor, potrebujejo čas, da jih podpirajo brskalniki. Babel to težavo reši s samodejno transpilacijo.

Ideja izdelka je preprosta: Babel prevzame kodo ES6 ali ES7 in nove skladenjske elemente nadomesti z emulacijsko kodo. Rezultat potrjuje klasično sintakso JavaScript in deluje v starejših brskalnikih, kot je Internet Explorer.

Začetna izdaja Babel je svet prevzela. Kmalu po tem, ko se je prvič pojavil, so ga sprejeli različni okviri, kot so React, Vue in Ember. Razvijalci izdelek pogosto uporabljajo, ne da bi vedeli, da deluje v ozadju - več kot en priljubljen npm projekt je odvisen od Babela.



Te odvisnosti so postopek sprostitve predhodnika spremenile v konfliktno zadevo. Različica 7, ki jo še vedno upravlja majhna ekipa vzdrževalcev, je skušala biti čim bolj združljiva. Lomljivih sprememb je le malo, kakovost generiranja kode pa ostaja visoka (če delate z ekipo in shranjujete dokumente shranjevanje v oblaku vam bo pomagal ostati koheziven).

Če še niste sodelovali z Babel, naj bo to vaše vodilo. Zmožnost uporabe naprednih funkcij JavaScript brez skrbi glede združljivosti olajša življenje.

Bi radi z nekaterimi orodji za poenostavitev vašega procesa? Naš vodnik po najboljših graditelj spletnih strani bo pomagal. Želite dolgoročno podporo? Pojdite desno spletno gostovanje storitev.

01. Preverjanje različice

Babel običajno živi v okolju za izvajanje Node. Začnimo s preverjanjem uporabljenih različic. Izhodni podatki vsebujejo stanje različice na delovni postaji Ubuntu 14.04, ki je bila uporabljena za ustvarjanje naslednjega članka. To ni pedantnost - slika, ki spremlja ta korak, kaže, da je ekipa Babel opustila podporo za kar nekaj različic Node.js.

tamhan@tamhan-thinkpad:~$ node --version v8.14.0 tamhan@tamhan-thinkpad:~$ npm --version 6.4.1

02. Sprememba imen paketov

Ena od sprememb v različici 7 je vključevala premikanje paketov Babel v njihov lastni imenski prostor. Starejši paketi niso bili odstranjeni iz različnih skladišč. To je pomembno, saj uporaba starih imen paketov vodi do stanja, prikazanega na sliki, ki spremlja ta korak.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @ babel/preset-env @babel/node . . . + @babel/core@7.2.0 + @babel/node@7.2.0 + @babel/cli@7.2.0 + @babel/preset-env@7.2.0

03. Dodajte dejanje gradnje

Zgornji korak predvideva, da delate znotraj projekta npm. V tem primeru je zagon Babela prek akcije gradnje enostaven. Odprto package.json in ga spremenite, kot je prikazano v spodnji kodi:

{ . . . 'main': 'index.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1', 'build': 'babel index.js -d lib' },

04. Ročno prepišite kodo

Če Babel začne delovati, je treba sprožiti gradnjo. To je najbolje doseči z ukazom npm run. The -d vrednost obvešča Babel, da je treba rezultate postaviti v lib mapa - slika, ki spremlja ta korak, prikazuje, da se mapa ustvari sproti.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build > workspaceb7@1.0.0 build /home/tamhan/ workspaceB7 > babel index.js -d lib Successfully compiled 1 file with Babel.

05. Vprašanje konfiguracije

Priklic Babel-a brez dodatnih nastavitvenih možnosti ne omogoča prevajanja. Kodo je mogoče prevesti le, če ogrodje prejme dodatne informacije o ciljnem okolju. To lahko storite s parametrom ukazne vrstice ali z ustvarjanjem datoteke z imenom .babelrc v korenu projekta.

06. Konfigurirajte babelrc

Babel se konfigurira prek nabora vtičnikov, od katerih vsak uporablja transpilacije transformacije na osnovno kodo. Uporabljamo prednastavljena env paket - prihaja z vnaprej konfiguriranim naborom transformacij, namenjenih pokrivanju večine baz.

{ 'presets': ['@babel/preset-env'] }

07. Čas za testno vožnjo

V index.js dodajte malo novodobnega JavaScripta, da preizkusite program z neko kodo v živo. Koda, ki spremlja ta korak, ne bo delovala v starejših brskalnikih - po zaključku se implicitna funkcija nadomesti z normalno izjavo, kot je prikazano na sliki.

function tamstest(){ [1, 2, 3].map((n) => n + 1); }

08. Prilagodite ciljanje

prednastavljena env privzeto uporablja večino prevodov: cilj izdelka je ustvariti univerzalno združljiv JavaScript, ne glede na pasovno širino in stroške delovanja. Konfiguracijo lahko spremenite tako, da vnesete datoteko cilji objekt - spodnji primer cilja na različici Chroma in IE.

{ 'presets': [ [ '@babel/preset-env', { 'targets': { 'chrome': '58', 'ie': '11' } } ] ] }

09. Napredno ciljanje

Ciljanje na brskalnik Babel ni omejeno na Chrome in Internet Explorer. Zahvaljujoč sodelovanju z seznam brskalnikov , razvijalci lahko mešajo in ujemajo več kot ducat ciljev, kot je prikazano spodaj.

najboljši prenosni polnilnik za opombo 8

Imena ne razlikujejo med velikimi in malimi črkami:

  • Android za Android WebView.
  • Baidu za brskalnik Baidu.
  • BlackBerry ali bb za brskalnik Blackberry.
  • Chrome za Google Chrome.
  • ChromeAndroid ali and_chr za Chrome za Android.
  • Rob za Microsoft Edge.
  • Electron za ogrodje Electron. Pretvorjen bo v različico Chrome.
  • raziskovalec ali tj za Internet Explorer.
  • ExplorerMobile ali ie_mob za Internet Explorer Mobile.
  • Firefox ali ff za Mozilla Firefox.
  • FirefoxAndroid ali in_ff za Firefox za Android.
  • iOS ali ios_saf za iOS Safari.
  • Vozlišče za Node.js.Opera za Opera.
  • OperaMini ali op_mini za Opera Mini.
  • OperaMobile ali op_mob za Opera Mobile.
  • QQAndroid ali in_qq za brskalnik QQ za Android.
  • Safari za namizni Safari.
  • Samsung za internet Samsung.
  • UCAndroid ali and_uc za UC Browser za Android.

10. Napredno ciljanje, drugi del

Seznam brskalnikov lahko sprejme tudi napredne poizvedbe. Njegova domača stran navaja možnosti konfiguracije, ki jih lahko skoraj vse uporabimo tudi v Babelu s spreminjanjem babelrc . Poizvedbe je mogoče ovrednotiti lokalno, če je na vaši delovni postaji nameščen npx.

{ 'targets': '> 0.25%, not dead' }

11. Samodejno prevajanje

Ročno klicanje Babel postane hitro dolgočasno. Pripomoček nodemon nadzira vire datotečnega sistema in sproži ukaze, ko spremembe zaznajo. V teoriji se dodajanje podpore za nodemon reši z majhno spremembo package.json .

{ 'name': 'workspaceb7', . . . 'main': 'index.js', 'scripts': { 'start': 'nodemon --exec babel-node index.js',

12. Preverite prisotnost

Nekatere delovne postaje imajo nodemon nameščena globalno. V nasprotnem primeru se prikliče program in prikaže sporočilo o napaki, podobno spodnjemu. Na srečo uvajanje nodemon je enostavno doseči s pomočjo npm namestite ukaz.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

13. Preverite funkcionalnost

Ogenj ugasne nadmorske višine v terminalskem oknu in nadaljujte s spreminjanjem vsebine index.js z urejevalnikom, kot je gedit oz Koda Visual Studio . Po shranjevanju nodemon bo izpisal informacije o stanju.

[nodemon] restarting due to changes... [nodemon] starting `babel-node index.js` [nodemon] clean exit - waiting for changes before restart

14. Popravite transpilacijo

Medtem nodemon Zaznavanje bi moralo delovati brezhibno na tej točki, vsebina datoteke index.js datoteke, ki so v lib ne posodabljaj. To je posledica raznolikosti babel-vozlišče - prepisanih datotek ne zapiše na disk. Namesto tega sproži spremenjeno različico Node CLI, ki deluje s prepisanimi datotekami.

15. Programsko prevedite kodo

Babel ni omejen na delo v ukazni vrstici. Če so nameščeni pravilni paketi, se lahko koda prevede tudi iz drugega programa. Delček k temu koraku uporablja nabor osnovnih transformacij za vhodni niz. Upoštevajte, da nastavitve konfiguracije običajno dobite iz a babelrc mapa.

var babel = require('@babel/core'); import { transform } from '@babel/core'; import * as babel from '@babel/core'; babel.transform('code();', options, function(err, result) { result.code; result.map; result.ast; });

16. Prepiši celotne datoteke

Izvorna koda se običajno ne shrani v spremenljivke niza. API Babel to upošteva prek nabora funkcij, povezanih z datotekami, ki se odpovejo vhodnemu nizu za spremenljivko z imenom datoteke. Rezultati pa se vrnejo kot običajna spremenljivka JavaScript.

babel.transformFile('filename.js', options, function (err, result) { result; // => { code, map, ast } } );

17. Sinhronizacija in asinhronizacija

Babel 7 je predstavil sinhrono in asinhrono različico večine klicev API. Poskrbite, da boste izbrali pravega za svoje potrebe - medtem ko lahko kopirate majhne primere sproti, sprostitev Babela na bolj zapletenih datotekah zlahka povzroči zamude, ki trajajo več deset sekund.

18. Spoznajte posamezne vtičnike

Če se kdaj vprašate, kaj se dogaja v ozadju, preprosto obiščite tej strani . Ponuja seznam vseh vtičnikov, ki jih trenutno vsebuje distribucija Babel, in vsebuje tudi nekaj namigov za vse, ki želijo ustvariti svoj vtičnik.

19. Odstranite podrobnosti TypeScript

Babel ni omejen na prenašanje novodobnih elementov JavaScript. Izdelek vsebuje funkcijski mehanizem TypeScript. Odstrani tipkalne informacije in nadomesti napredne elemente. Na žalost Babel ne izvaja preverjanja tipa - to odpravlja eno najpomembnejših prednosti jezika TypeScript.

{ 'presets': ['@babel/preset-typescript'] }

20. Zaženite Babel na spletu

Medtem ko postopki prevajanja običajno potekajo gladko, se včasih pojavijo težave. V tem primeru je Babel REPL je koristno. Zažene Babel v brskalniku vaše delovne postaje in prikaže vhod in izhod tik ob drugem.

daj obraz na superjunaka

21. Spoznajte bolečinske točke

Naš uvod je pojasnil, da se Babel široko uporablja v različnih projektih. Vzdrževalna skupina Babel poenostavlja nadgradnje različic z podroben dnevnik sprememb . Če Babel uporabljate programsko, se ne pozabite posvetovati z Vodnik za nadgradnjo API-ja .

Ta članek je bil prvotno objavljen v številki 283 revije kreativno spletno oblikovanje Oblikovalec spletnih strani . Kupite številko 283 tukaj ali naročite se na Web Designer tukaj .

Povezani članki: