Impostazione di Babele, per compilare es6+ codici Javascript in una indietro compatibile con la versione di JavaScript in corrente e vecchi browser o ambienti è probabilmente la cosa più semplice che ho trovato come sviluppatore. Tuttavia, mi ci è voluto del tempo per rendermene conto e questo è dovuto al fatto che Babel non è solo un pacchetto che si collega al progetto e inizia a suonare, ma in realtà è necessario ottenere più pacchetti insieme per farlo funzionare, conoscere i pacchetti giusti da scegliere può essere fonte di confusione. In questo post del blog, spiegherò come è possibile impostare Babel per aiutarti a compilare i codici Javascript es6, es7, es8 ecc.

Come ho detto prima, far funzionare Babel implica ottenere un paio di pacchetti danpm, quindi iniziamo. Il primo pacchetto che installeremo è babel-core. Questo è il motore babel, ma non può davvero fare nulla da solo, ha bisogno di altri pacchetti per assisterlo.

Eseguinpm install @babel/core --saveper installare babel-core

Il secondo pacchetto che installeremo è babel-cli. Questo pacchetto assicura che siamo in grado di utilizzare Babel dalla riga di comando e dal momento che stiamo lavorando in un ambiente nodo dovremmo sicuramente bisogno di questo.

Esegui npm install @babel/cli --save per installare babele-cli

se Si desidera includere una babele di script nella sezione script del package.json come questo:

"scripts": {
... "babel": "./node_modules/.bin/babel",
...}

Questo potrebbe aiutarci ad evitare di scrivere a lungo e confuso comandi nell’interfaccia a riga di comando ogni volta che si desidera compilare.

Testing

Ora, con questi due pacchetti, possiamo effettivamente fare qualcosa con babel, solo per sentire cosa sia babel, tuttavia, nessuna trasformazione si verificherebbe ancora.

Creare un test.js file e scrivere un po ‘ di JavaScript es6 codici in esso, poi vai alla riga di comando ed eseguire

npm run babel test.js -- --out-file compiledTest.js

Si dovrebbe vedere un nuovo compiledTest.js file dovrebbe contenere proprio la stessa cosa che hai scritto nel test.js, in modo che, senza la compilazione si è verificato, ma Babele di lavoro.

Il comando che abbiamo eseguito sopra sta semplicemente dicendo a Babel di compilare il filetest.jsin un file di output chiamatocompiledTest.js. Se avete bisogno di compilare i file in una directory basta fare:

npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination

Quindi, per ottenere Babel per fare la compilazione effettiva, abbiamo bisogno di installare alcuni plugin per assistere il babel-core. La verità è che babel non fa nulla da solo, utilizza i plugin installati per eseguire la sua magia. Per noi essere in grado di compilare es6+ codici, si deve installare il env preset

Esegui npm install @babel/preset-env --save per installare il env preset

Attendere, non dico babele esigenze plugin, in modo che l’inferno è preimpostato? Bene, un preset è solo un gruppo di plugin, quindi ho ragione, babel ha bisogno di un plugin o plugin.
Il env preset è un gruppo di plugin che aiutano a compilare versioni moderne / future di JavaScript (ES2015, ES2016, ecc.) in una versione attualmente supportata di javascript.

Dopo aver installato quel pacchetto, dobbiamo dire a Babel,

Hey guy, ho appena installato un set di plugin che voglio che tu usi per la mia compilazione.

Lo faremmo creando un file .babelrc e quel file conterrebbe questo frammento

{
"presets" : 
}

Ora vai alla riga di comando e prova a compilare il nostro test.js file di nuovo.

Se il filecompiledTest.js contiene la versione es5 ditest.js dopo aver completato la compilazione, è tutto; abbiamo appena impostato babel, ma se non lo fa, potresti voler controllare se tutto è andato bene dall’inizio.

Solo per conferma, la struttura del file dovrebbe essere simile a questa:

|- node_modules
|- package.json
|- test.js
|- compiledTest.js
|- .babelrc

Compilazione al volo

A volte, non vuoi compilare tutti i tuoi codici prima di eseguirli; vuoi solo che la compilazione e l’esecuzione avvengano allo stesso tempo. Per ottenere ciò è necessario utilizzare il comando babel-node. Questo comando viene fornito con il pacchettobabel-cli ed è proprio come un sostituto per il comandonode. Quindi, invece di fare qualcosa del genere node ./path/to/file per eseguire il tuo file, dovresti fare babel-node ./path/to/file per compilare ed eseguire il file allo stesso tempo.

Nota, il babel-il nodo non è nella riga di comando di default, ma può essere la necessità di modificare lo script sezione del package.json per includere

"scripts": {
..."babel-node": "./node_modules/.bin/babel-node",
...}

Ed eseguire il file come questo:

npm run babel-node ./path/to/file

Conclusione

ho scritto/aggiornato questo post del blog con babel-core in versione 7.2.0, se si scopre che babel, ha apportato alcune modifiche di rilievo nel processo di impostazione in alcune versioni successive, è possibile fammi sapere ([email protected]) in modo che vorrei aggiornare questo blog, post, grazie.