BabelJS - Predefinições de Babel
As predefinições do Babel são detalhes de configuração para o babel-transpiler, dizendo-lhe para transpilar no modo especificado. Aqui estão algumas das predefinições mais populares que discutiremos neste capítulo -
- ES2015
- Env
- React
Precisamos usar predefinições que tenham o ambiente no qual queremos que o código seja convertido. Por exemplo, a predefinição es2015 converterá o código para es5 . A predefinição com o valor env também será convertida em es5 . Ele também possui recursos adicionais, ou seja, opções. Caso você queira que o recurso seja compatível com versões recentes de navegadores, o babel converterá o código apenas se não houver suporte para recursos nesses navegadores. Com predefinida reagir , Babel vai transpile o código quando a reagir.
Para trabalhar com Presets, precisamos criar o arquivo .babelrc na pasta raiz do nosso projeto. Para mostrar o funcionamento, vamos criar uma configuração de projeto conforme mostrado abaixo.
comando
npm init
Temos que instalar a predefinição do babel necessária da seguinte forma, juntamente com o babel cli, o babel core, etc.
Pacotes Babel 6
npm install babel-cli babel-core babel-preset-es2015 --save-dev
Pacotes Babel 7
npm install @babel/cli @babel/core @babel/preset-env --save-dev
Note - babel-preset-es2015 está obsoleto a partir do babel 7.
es2015 or @babel/env
Crie o arquivo .babelrc na raiz do projeto (babel 6) -
Em .babelrc, as predefinições são es2015. Esta é a indicação para o compilador babel de que queremos que o código seja convertido para es2015.
Para o babel 7, precisamos usar predefinições da seguinte forma -
{
"presets":["@babel/env"]
}
Aqui está o package.json após a instalação -
Como instalamos o babel localmente, adicionamos o comando babel na seção de scripts do package.json.
Vamos trabalhar em um exemplo simples para verificar a transpilação usando o es2015 predefinido.
Exemplo
main.js
let arrow = () => {
return "this is es6 arrow function";
}
Transpilado para ES5 conforme mostrado abaixo.
comando
npx babel main.js --out-file main_es5.js
main_es5.js
"use strict";
var arrow = function arrow() {
return "this is es6 arrow function";
};
Env
Usando a predefinição Env, você pode especificar o ambiente para o qual o código final será transpilado.
Vamos usar a mesma configuração de projeto criada acima e alterar as predefinições de es2015 para env como mostrado abaixo.
Além disso, precisamos instalar o babel-preset-env. Vamos executar o comando fornecido abaixo para instalar o mesmo.
comando
npm install babel-preset-env --save-dev
Vamos compilar main.js novamente e ver a saída.
main.js
let arrow = () => {
return "this is es6 arrow function";
}
comando
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
var arrow = function arrow() {
return "this is es6 arrow function";
};
Vimos que o código transpilado é es5. Caso conheçamos o ambiente em que nosso código será executado, podemos usar esta predefinição para especificá-lo. Por exemplo, se especificarmos os navegadores como a última versão do Chrome e Firefox, conforme mostrado abaixo.
comando
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
let arrow = () => {
return "this is es6 arrow function";
};
Agora estamos obtendo a sintaxe da função de seta como ela é. Não é transpilado para a sintaxe ES5. Isso ocorre porque o ambiente que queremos que nosso código suporte, já tem suporte para a função de seta.
O Babel se encarrega de compilar o código com base no ambiente usando o babel-preset-env. Também podemos direcionar a compilação com base no ambiente nodejs conforme mostrado abaixo
A compilação final do código é mostrada abaixo.
comando
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
let arrow = () => {
return "this is es6 arrow function";
};
Babel compila o código de acordo com a versão atual do nodejs.
React Preset
Podemos usar a predefinição react quando estivermos usando Reactjs. Vamos trabalhar em um exemplo simples e usar a predefinição de reação para ver a saída.
Para usar a predefinição, precisamos instalar o babel-preset-react (babel 6) da seguinte forma -
npm install --save-dev babel-preset-react
Para babel 7, é o seguinte -
npm install --save-dev @babel/preset-react
As alterações em .babelrc são as seguintes para babel6 -
Para babel 7
{
"presets": ["@babel/preset-react"]
}
main.js
<h1>Hello, world!</h1>
comando
npx babel main.js --out-file main_env.js
main_env.js
React.createElement(
"h1",
null,
"Hello, world!"
);
O código de main.js é convertido para a sintaxe reactjs com preset: react.