@babel/cli

Traduzione Beta Non Ufficiale

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

Babel include una CLI integrata che può essere utilizzata per compilare file dalla riga di comando.

Inoltre, vari script di punto di ingresso si trovano nel pacchetto di primo livello in @babel/cli/bin. Tra questi c'è uno script di utilità eseguibile da shell, babel-external-helpers.js, e lo script principale della CLI di Babel, babel.js.

Installazione

Sebbene sia possibile installare Babel CLI globalmente sulla propria macchina, è molto meglio installarlo localmente progetto per progetto.

Ci sono due ragioni principali per questa scelta.

1. Progetti diversi sulla stessa macchina possono dipendere da versioni differenti di Babel, consentendo di aggiornarle individualmente.

2. L'assenza di dipendenze implicite dall'ambiente di lavoro rende il progetto molto più portabile e più semplice da configurare.

Possiamo installare Babel CLI localmente eseguendo:

npm

npm install --save-dev @babel/core @babel/cli

Yarn

yarn add --dev @babel/core @babel/cli

pnpm

pnpm add --save-dev @babel/core @babel/cli

Bun

bun add --dev @babel/core @babel/cli

nota

Se non disponi di un package.json, creane uno prima dell'installazione. Ciò garantirà una corretta interazione con il comando npx.

Al termine dell'installazione, il tuo file package.json dovrebbe includere:

{
  "devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.0.0"
  }
}

Utilizzo

nota

Installa prima @babel/cli e @babel/core prima di usare npx babel, altrimenti npx installerà l'obsoleta versione 6.x di babel. Oltre a npx, puoi includerlo in uno script npm run oppure eseguirlo tramite il percorso relativo: ./node_modules/.bin/babel.

Shell

npx babel script.js

Visualizzare l'utilizzo

Shell

npx babel --help

Compilare file

Compila il file script.js e invia l'output su stdout.

Shell

npx babel script.js
# output...

Per inviare l'output su un file, utilizza --out-file o -o.

Shell

npx babel script.js --out-file script-compiled.js

Per compilare un file automaticamente a ogni modifica, usa l'opzione --watch o -w:

Shell

npx babel script.js --watch --out-file script-compiled.js

Compilare con Source Map

nota

Dalla versione v7.19.3, se questo parametro non è specificato, @babel/cli seguirà i file di configurazione.

Per aggiungere un file source map, utilizza --source-maps o -s.

Shell

npx babel script.js --out-file script-compiled.js --source-maps

In alternativa, per avere source map inline, usa --source-maps inline.

Shell

npx babel script.js --out-file script-compiled.js --source-maps inline

Compilare directory

Compila l'intera directory src e invia l'output nella directory lib usando --out-dir o -d. Questa operazione non sovrascrive altri file o directory presenti in lib.

Shell

npx babel src --out-dir lib

Compila l'intera directory src e invia l'output come singolo file concatenato.

Shell

npx babel src --out-file script-compiled.js

Directory con file TypeScript

Utilizza l'opzione --extensions per specificare quali estensioni di file Babel deve gestire durante la compilazione dell'intera directory src. Le --extensions predefinite sono accessibili tramite Babel.DEFAULT_EXTENSIONS.

Shell

npx babel src --out-dir lib \
  --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs \
  --presets=@babel/preset-typescript,@babel/preset-env,@babel/preset-react

Ignorare file

Ignora i file di test e spec

Shell

npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"

Copiare file

Copia i file che non verranno compilati

Shell

npx babel src --out-dir lib --copy-files

Se non vuoi copiare i file JavaScript ignorati:

History

Version	Changes
v7.8.0	Added --copy-ignored
v7.8.4	Change copyeIgnored option default to true, it can be disabled by --no-copy-ignored

Shell

npx babel src --out-dir lib --copy-files --no-copy-ignored

Pipe di file

Inoltra un file tramite stdin e invia l'output su script-compiled.js

Shell

npx babel --out-file script-compiled.js < script.js

Utilizzo dei plugin

Utilizza l'opzione --plugins per specificare i plugin da usare nella compilazione

Shell

npx babel script.js --out-file script-compiled.js --plugins=@babel/transform-class-properties,@babel/transform-modules-amd

Utilizzo dei preset

Utilizza l'opzione --presets per specificare i preset da usare nella compilazione

Shell

npx babel script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/flow

Utilizzo dei file di configurazione

Ignorare .babelrc.json o .babelrc

Ignora la configurazione dal file .babelrc o .babelrc.json del progetto e utilizza le opzioni CLI, ad esempio per una build personalizzata

Shell

npx babel --no-babelrc script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/preset-react

Percorso del file di configurazione personalizzato

Shell

npx babel --config-file /path/to/my/babel.config.json --out-dir dist ./src

Vedi qui per ulteriori informazioni sui file di configurazione.

Impostare le estensioni dei file

Aggiunto in: v7.8.0

Per impostazione predefinita, il file transpilato utilizzerà l'estensione .js.

Puoi controllare l'estensione del file di output con --out-file-extension

Shell

npx babel src --out-dir lib --out-file-extension .mjs

Puoi anche preservare l'estensione del file di input con --keep-file-extension

Shell

npx babel src-with-mjs-and-cjs --out-dir lib --keep-file-extension

Nota che --keep-file-extension e --out-file-extension non possono essere usate insieme.

Utilizzo avanzato

Sono disponibili molte altre opzioni, vedi options, babel --help e altre sezioni per ulteriori informazioni.