Spiegazione dettagliata della configurazione di Webstorm per utilizzare babel per la trasformazione automatica di ES6 in ES5

Prefazione: ECMAScript 6 è la nuova versione standard del linguaggio JavaScript, pubblicata ufficialmente nel giugno 2015. La Mozilla Corporation rilascerà JavaScript 2.0 basandosi su questo standard. Gli obiettivi di ES6 sono rendere il linguaggio JavaScript in grado di scrivere applicazioni complesse e di grandi dimensioni, diventando un linguaggio di sviluppo aziendale. Tuttavia, i browser moderni hanno un basso livello di supporto per le nuove caratteristiche di ES6, quindi per utilizzare direttamente le nuove caratteristiche di ES6 nei browser è necessario utilizzare altri strumenti.

Oggi vi mostrerò come configurare Webstorm per utilizzare babel per trasformare automaticamente il codice ES6 in ES5. Babel è un decodificatore ampiamente utilizzato che può convertire il codice ES6 in ES5 perfettamente, quindi non dobbiamo aspettare il supporto dei browser per utilizzare le caratteristiche di ES6 nei nostri progetti.

1. Creare un nuovo progetto vuoto in Webstorm, chiamandolo es6demo.

2. Poi creare un nuovo file package.json nella directory radice, specificando solo due proprietà: name e version.

3. Aprire il terminale di Webstorm (Terminal), con il tasto rapido Alt+F12, per installare babel-cli. È anche possibile installarlo globalmente.

O aprirlo in questo modo:

Installare babel-cli: npm install --save-dev babel-cli

4. Dopo aver installato babel-cli, vedrete che è stato creato un nuovo file node_modules e un file package-lock.json, e noterete che il file package.json ha guadagnato alcune nuove proprietà.

"devDependencies": {
"babel-cli": "^6.26.0"
}

Questa riga di codice indica che babel-cli è stato installato con successo e ha formato una dipendenza.

5. Poi seleziona l'opzione Javascript in Settings->Languages & Frameworks e seleziona la versione version come ECMAScript6.

6. Poi nel terminale di webstorm, installa il preset di Babel per riconoscere correttamente il codice ES6, il comando è come segue:

npm install --save-dev babel-preset-es2015

Dopo l'installazione, nel file package.json verrà aggiunto:

"babel-preset-es2015": "^6.24.1" Questa riga di codice indica che babel-preset-es2015 è stato installato con successo.

7. Crea un file .babelrc nella directory principale, il contenuto è come segue:

{
 "presets": [
  "es2015"
 ]
}

8. Imposta il File Watcher. File--impostazioni--Strumenti--File Watcher.

9. Crea un file chiamato test.js, scrivi la sintassi es6 al suo interno, non più errori. Il file test-compiled.js è il file compilato in es5, per impostazione predefinita è in modalità strict.

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.