BabelJS - CLI

O Babel vem com uma interface de linha de comando embutida, que pode ser usada para compilar o código.

Crie um diretório no qual você estaria trabalhando. Aqui, criamos um diretório chamado babelproject . Vamos usar nodejs para criar os detalhes do projeto.

Usamos npm init para criar o projeto como mostrado abaixo -

Aqui está a estrutura do projeto que criamos.

Agora, para trabalhar com o Babel, precisamos instalar Babel cli, Babel preset, Babel core como mostrado abaixo -

babel-cli

Execute o seguinte comando para instalar o babel-cli -

npm install --save-dev babel-cli

babel-preset

Execute o seguinte comando para instalar o babel-preset -

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

babel-core

Execute o seguinte comando para instalar o babel-core -

npm install --save-dev babel-core

Após a instalação, aqui estão os detalhes disponíveis em package.json -

Instalamos plugins babel locais para o projeto. Isso é feito para que possamos usar o babel de maneira diferente em nossos projetos com base nos requisitos do projeto e também em diferentes versões do babeljs. Package.json fornece os detalhes da versão do babeljs usado.

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

Babel é usado principalmente para compilar código JavaScript, que terá compatibilidade com versões anteriores. Agora, vamos escrever nosso código em ES6 -> ES5 ou ES7 -> ES5 também ES7-> ES6, etc.

Para fornecer instruções ao Babel sobre o mesmo, durante a execução, precisamos criar um arquivo chamado .babelrc na pasta raiz. Ele contém um objeto json com detalhes das predefinições conforme mostrado abaixo -

Vamos criar o arquivo JavaScript index.js e compilá-lo para es2015 usando o Babel. Antes disso, precisamos instalar a predefinição es2015 da seguinte forma -

Em index.js, criamos uma função usando a função de seta, que é um novo recurso adicionado no es6. Usando o Babel, iremos compilar o código para es5.

Para executar o es2015, o seguinte comando é usado -

npx babel index.js

Resultado

Ele exibe o código index.js em es5 conforme mostrado acima.

Podemos armazenar a saída no arquivo executando o comando conforme mostrado abaixo -

npx babel index.js --out-file index_es5.js

Resultado

Aqui está o arquivo que criamos, index_es5.js -