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");
};