Configurazione di Babel 6

31 ottobre 2015 · Lettura di 3 min

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Babel 6 è appena stato rilasciato e stiamo ancora sistemando molti aspetti. Negli ultimi due giorni abbiamo registrato più attività su GitHub e Slack che mai. Tutti coloro che stanno aiutando stanno facendo un ottimo lavoro.

Tuttavia, la documentazione è ancora carente a questo punto. Sto lavorando per creare una sezione completamente nuova "Per iniziare" sul sito.

Questo articolo coprirà le nozioni fondamentali fino al completamento di quella sezione.

Installazione di Babel

Il pacchetto babel non esiste più. In precedenza includeva l'intero compilatore, tutte le trasformazioni e una serie di strumenti CLI, ma ciò causava download inutilmente grandi e creava confusione. Ora l'abbiamo suddiviso in due pacchetti separati: babel-cli e babel-core.

Shell
$ npm install --global babel-cli
# or
$ npm install --save-dev babel-core

Se vuoi usare Babel dalla CLI, installa babel-cli. Se invece vuoi usare l'API Node, installa babel-core.

Attualmente, la maggior parte delle integrazioni non è stata aggiornata per Babel 6, ma ciò cambierà nei prossimi giorni.

Aggiunta di Plugin e Preset

Babel 6 viene fornito senza trasformazioni predefinite. Quando esegui Babel su un file, questo verrà semplicemente restituito senza modifiche.

Per iniziare a compilare diverse funzionalità, devi installare dei plugin. Ad esempio, per usare le arrow function:

Prima installa il plugin per le arrow function:

Shell
$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions

Poi aggiungilo al tuo file .babelrc in questo modo:

JavaScript
{
  "plugins": ["transform-es2015-arrow-functions"]
}

Ora, se esegui Babel su un file contenente arrow function, queste verranno compilate. Sembra facile, vero? Non così in fretta.

I plugin di Babel sono progettati per compilare in modo incrementale. Supponiamo tu voglia usare una funzionalità ES2019: verrebbe compilata in ES2018, poi ES2017 e così via. Ciò garantisce che gli utenti possano usare implementazioni native se lo desiderano.

Questo avviene anche all'interno di una singola specifica. Ad esempio, le costanti ES2015 verranno compilate in variabili let ES2015. Quindi, se vuoi arrivare fino a ES5, devi compilare anche quello.

Shell
$ npm install --save-dev babel-plugin-check-es2015-constants
$ npm install --save-dev babel-plugin-transform-es2015-block-scoping

JavaScript
{
  "plugins": [
    "check-es2015-constants",
    "transform-es2015-block-scoping"
  ]
}

Queste dipendenze non sono facili da gestire. Se non vuoi specificarle manualmente, puoi installare un preset.

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

JavaScript
{
  "presets": ["es2015"]
}

Per includere tutte le versioni JavaScript:

Shell
$ npm install --save-dev babel-preset-env

JavaScript
{
  "presets": ["env"]
}

Anche React ha il suo preset:

Shell
$ npm install --save-dev babel-preset-react

JavaScript
{
  "presets": ["react"]
}

Questa è anche la sostituzione dell'opzione stage:

Shell
$ npm install --save-dev babel-preset-stage-2

JavaScript
{
  "presets": ["stage-2"]
}

Nota: I preset stage includono automaticamente tutti gli stage superiori (es. stage 1 include 2 e 3)

Installazione di Babel​

Aggiunta di Plugin e Preset​

Installazione di Babel

Aggiunta di Plugin e Preset