gyors beállítása Babel lefordítani Es6 + Javascript kódok csomópont környezetben.
a Babel beállítása es6+ Javascript kódok visszafelé kompatibilis verziójára a jelenlegi és régebbi böngészőkben vagy környezetekben valószínűleg a legegyszerűbb dolog, amit találkoztam, mint egy fejlesztő. Azonban időbe telt, hogy ezt felismerjem, és ez annak a ténynek köszönhető, hogy a Babel nem csak egy csomag, amelyet csatlakoztatsz a projektedhez, és elkezd játszani, de valójában több csomagot kell összegyűjtened ahhoz, hogy működjön, a megfelelő csomagok ismerete zavaró lehet. Ebben a blogbejegyzésben elmagyaráznám, hogyan állíthatja be a Babel-t, hogy segítsen összeállítani az es6, es7, es8 stb.Javascript kódokat a Javascript verzióiba, amelyek hiba nélkül futhatnak a nodejs futási időben.
ahogy korábban mondtam, a Babel munkába állítása magában foglalja a npm csomagok beszerzését, Tehát kezdjük el. Az első csomag, amelyet telepítenénk, a babel-core. Ez a babel motor, de önmagában nem igazán tud semmit csinálni, szüksége van néhány más csomagra, hogy segítse.
Run
npm install @babel/core --saveA babel-core
a telepítendő második csomag a babel-cli. Ez a csomag biztosítja, hogy a Bábelt a parancssorból tudjuk használni, és mivel csomópont környezetben dolgozunk, erre feltétlenül szükségünk van.
Run
npm install @babel/cli --saveA babel-cli
a package.json így:
"scripts": {
... "babel": "./node_modules/.bin/babel",
...}
Ez segít elkerülni a hosszú és zavaros parancsok beírását a parancssori felületen minden egyes alkalommal, amikor összeállítani akarjuk.
tesztelés
most, ezzel a két csomaggal valójában tehetünk valamit babellel, csak azért, hogy érezzük, mi a babel, azonban még nincs átalakulás.
Hozzon létre egy test.js fájlt és írjon bele néhány JavaScript es6 kódot, majd lépjen a parancssorba, és futtassa a
npm run babel test.js -- --out-file compiledTest.js
egy új compiledTest.js fájlt, és ez a fájl ugyanazt tartalmazná, amit ön írta a test.js, így nem történt fordítás, de Babel működik.
a fenti parancs egyszerűen azt mondja Babelnek, hogy fordítsa le a test.jsfájlt egy compiledTest.js nevű kimeneti fájlba. Ha fájlokat kell összeállítania egy könyvtárban, csak tegye:
npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination
tehát ahhoz, hogy Babel elvégezze a tényleges összeállítást, telepítenünk kell néhány plugint a babel-core támogatására. Az igazság az, hogy a babel nem csinál semmit, telepített plugineket használ a mágia végrehajtásához. Ahhoz, hogy össze tudjuk állítani az es6+ kódokat, telepítenünk kell a env preset
Run
npm install @babel/preset-env --saveaenv
várj, nem mondtam, hogy a Babelnek pluginekre van szüksége, tehát mi a fene van előre beállítva? Nos, egy előre beállított csak egy plugin-csoport, tehát igazam van, Babelnek szüksége van egy pluginre vagy bővítményre.
aenv preset egy plugin-csoport, amely segít a JavaScript modern/jövőbeli verzióinak összeállításában (ES2015, ES2016 stb.) a javascript jelenleg támogatott verziójába.
a csomag telepítése után el kell mondanunk Babelnek,
Hé srác, csak telepítettem egy plugin-készletet, amelyet Azt akarom, hogy használj az összeállításomhoz.
ezt egy .babelrc fájl létrehozásával tennénk meg, és ez a fájl tartalmazza ezt a
{
"presets" :
}
most menj a parancssorba, és próbáld meg összeállítani a test.js fájl újra.
Ha acompiledTest.js fájl tartalmazza atest.js es5 verzióját az összeállítás elvégzése után, akkor ez az; éppen beállítottuk a Babelt, de ha nem, akkor érdemes ellenőrizni, hogy minden jól ment-e a kezdetektől.
csak megerősítés céljából a fájlstruktúrának hasonlónak kell lennie:
|- node_modules
|- package.json
|- test.js
|- compiledTest.js
|- .babelrc
összeállítása menet közben
néha nem akarja először lefordítani az összes kódot, mielőtt végrehajtaná őket; csak azt akarja, hogy a fordítás és a végrehajtás egyszerre történjen meg. Ennek eléréséhez használja a babel-node parancsot. Ez a parancs a babel-cli csomaggal érkezik, és olyan, mint a node parancs cseréje. Tehát ahelyett, hogy valami ilyesmit csinálna node ./path/to/filea fájl futtatásához a babel-node ./path/to/file fájlt egyszerre kell lefordítani és futtatni.
Megjegyezzük, hogy a bábel-csomópont nem a parancssorban alapértelmezés szerint, ezért előfordulhat, hogy szüksége lenne arra, hogy módosítsa a forgatókönyvet részében a package.json hogy include
"scripts": {
..."babel-node": "./node_modules/.bin/babel-node",
...}
Illetve a fájl, mint ez: npm run babel-node ./path/to/file
Következtetés
írtam/frissítve ezt a blogbejegyzést a bábel-core verzió 7.2.0, ha kiderül, hogy bábel tett néhány friss változások a beállítási folyamat egy magasabb verzió, akkor szólj ([email protected]), így szeretnék frissíteni ezt a blogbejegyzést, köszönöm.
Leave a Reply