BabelJS - Babel CLI

O BabelJS vem com uma Interface de Linha de Comando embutida em que o código JavaScript pode ser facilmente compilado para o respectivo ECMA Script usando comandos fáceis de usar. Discutiremos o uso desses comandos neste capítulo.

Primeiro, instalaremos o babel-cli para nosso projeto. Usaremos babeljs para compilar o código.

Crie uma pasta para seu projeto para brincar com o babel-cli.

comando

npm init

Exibição

Package.json criado para o projeto acima -

Vamos executar os comandos para instalar o babel-cli.

Pacote para babel 6

npm install --save-dev babel-cli

Pacote para babel 7

npm install --save-dev @babel/cli

Exibição

Instalamos o babel-cli e aqui está o package.json atualizado -

Além disso, precisamos instalar o babel-preset e o babel-core. Vamos agora ver o comando para a instalação.

Pacotes para babel 6

npm install --save-dev babel-preset-env
npm install --save-dev babel-core

Pacotes para babel 7

npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env

Aqui está o package.json atualizado para os comandos acima -

Como precisamos compilar para o código JavaScript que vamos escrever para ter compatibilidade com versões anteriores, vamos compilá-lo para ECMA Script 5. Para isso, precisamos instruir o babel a procurar pelo preset, ou seja, a versão es em que a compilação será feito. Precisamos criar um.babelrc> arquivo na pasta raiz do nosso projeto criado conforme mostrado abaixo.

Ele contém um objeto json com os seguintes detalhes predefinidos -

{ "presets": ["env"] }

Para o babel 7, o .babelrc é o seguinte -

{
   "presets":["@babel/env"]
}

Instalamos o babel local para o projeto. Para fazer uso de babel em nosso projeto, precisamos especificar o mesmo em package.json da seguinte forma -

Compilar arquivos JS

Agora estamos prontos para compilar nossos arquivos JavaScript. Crie uma pasta src em seu projeto; nesta pasta, crie um arquivo chamado main.js e escreva um código javascript es6 conforme mostrado abaixo -

comando

npx babel src/main.js

Resultado

No caso acima, o código de main.js é exibido no terminal na versão es5. A função de seta de es6 é convertida em es5 conforme mostrado acima. Em vez de exibir o código compilado no terminal, iremos armazená-lo em um arquivo diferente, conforme mostrado abaixo.

Criamos uma pasta em nosso projeto chamada, onde queremos que os arquivos compilados sejam armazenados. A seguir está o comando que irá compilar e armazenar a saída onde quisermos.

comando

npx babel src/main.js --out-file out/main_out.js

Resultado

A opção no comando --out-file nos ajuda a armazenar a saída no local do arquivo de nossa escolha.

No caso de desejarmos que o arquivo seja atualizado toda vez que fizermos alterações no arquivo principal, adicionar --watch ou -w opção para o comando conforme mostrado abaixo.

comando

npx babel src/main.js --watch --out-file out/main_out.js

Resultado

Você pode fazer a alteração no arquivo principal; esta mudança refletirá no arquivo compilado.

No caso acima, mudamos a mensagem de registro e o --watch opção mantém a verificação de qualquer mudança e as mesmas mudanças são adicionadas no arquivo compilado.

Arquivo compilado

Em nossas seções anteriores, aprendemos como compilar arquivos individuais. Agora, vamos compilar um diretório e armazenar os arquivos compilados em outro diretório.

Na pasta src, vamos criar mais um arquivo js chamado main1.js. No momento, a pasta src tem 2 arquivos javascriptmain.js e main1.js.

A seguir está o código nos arquivos -

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main1.js

var handler = () => {
   console.log("Added one more file");
}

O comando a seguir compilará o código do srcpasta e armazene-o na pasta de saída /. Removemos todos os arquivos doout/pasta e a manteve vazia. Vamos executar o comando e verificar a saída na pasta out /.

comando

npx babel src --out-dir out

Temos 2 arquivos na pasta de saída - main.js e main1.js

main.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

main1.js

"use strict";

var handler = function handler() {
   console.log("Added one more file");
};

A seguir, executaremos o comando fornecido a seguir para compilar os dois arquivos em um único arquivo usando o babeljs.

comando

npx babel src --out-file out/all.js

Resultado

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};
"use strict";

var handler = function handler() {
console.log("Added one more file");
};

Caso desejemos ignorar a compilação de alguns arquivos, podemos usar a opção --ignore conforme mostrado abaixo.

comando

npx babel src --out-file out/all.js --ignore src/main1.js

Resultado

all.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

Podemos fazer uso de opções de plug-ins para serem usadas durante a compilação de arquivos. Para fazer uso de plug-ins, precisamos instalá-lo conforme mostrado abaixo.

comando

npm install --save-dev babel-plugin-transform-exponentiation-operator

expo.js

let sqr = 9 ** 2;
console.log(sqr);

comando

npx babel expo.js --out-file expo_compiled.js --plugins=babel-plugin-transform-exponentiation-operator

Resultado

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Também podemos usar predefinições no comando, conforme mostrado abaixo.

comando

npx babel src/main.js --out-file main_es5.js --presets=es2015

Para testar o caso acima, removemos a opção de predefinições de .babelrc.

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

Também podemos ignorar .babelrc na linha de comando da seguinte maneira -

npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015

Para testar o caso acima, adicionamos predefinições de volta a .babelrc e o mesmo será ignorado por causa de --no-babelrc que adicionamos no comando. Os detalhes do arquivo main_es5.js são os seguintes -

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};