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 -