Os senhores que acompanham este blog sabem que nem todas as postagens são um endosso de uma técnica, mas simplesmente um tutorial de como fazer algo. Às vezes, a técnica descrita provavelmente não é algo que o senhor deva fazer. Esta é uma dessas publicações do blog.
A Analisador Babel é uma ferramenta essencial na pilha da Web atualmente. O Babel nos ajuda a usar padrões de JavaScript antes que eles cheguem ao navegador (encadeamento opcional), bem como JSX para React. Isso me fez pensar: como seria fácil escrever uma extensão do Babel que nos permitisse usar alias de palavras-chave, como fn em vez de function? Vamos dar uma olhada!
Criar um alias de palavra-chave com o Babel é mais fácil e mais difícil do que o senhor provavelmente imagina. No lado simples, é essencialmente apenas uma linha de código. Do lado negativo, o senhor precisa modificar o código do analisador principal do Babel.
Como exemplo, digamos que o senhor queira usar o alias fn para o JavaScript’s function do JavaScript. Um exemplo de trecho de código seria o seguinte:
// Named function
fn myFunction() {
return true;
}
// Function as variable
const myOtherFunction = fn() {
}
// Instantly executing function
(fn() {
})();
Após a análise, queremos que todas as instâncias de fn sejam substituídas por function. Para criar esse alias, precisaríamos modificar o arquivo createKeyword no seguinte arquivo
// File: packages/babel-parser/src/tokenizer/types.js
// We'll be adding one line
// ...
function createKeyword(name: string, options: TokenOptions = {}): TokenType {
options.keyword = name;
const token = new TokenType(name, options);
keywords.set(name, token);
// ADD THIS LINE:
if (name === "function") keywords.set("fn", token);
return token;
}
// ...
Para analisar um arquivo de amostra, posso executar:
node packages/babel-parser/bin/babel-parser.js /path/to/sample-file.js
O analisador fornecerá o seguinte quando encontrar uma instância de fn:
{
"type": "FunctionDeclaration",
"start": 0,
"end": 36,
"loc": {
"start": {
"line": 1,
"column": 0
},
"end": {
"line": 3,
"column": 1
}
},
"id": {
"type": "Identifier",
"start": 3,
"end": 13,
"loc": {
"start": {
"line": 1,
"column": 3
},
"end": {
"line": 1,
"column": 13
},
"identifierName": "myFunction"
},
"name": "myFunction"
}
// ...
O senhor deve estar se perguntando “por que eu faria isso?!”. Bem, o senhor provavelmente não faria: modificar uma biblioteca de código-fonte para seu próprio uso é um pesadelo de manutenção e usar palavras-chave não autorizadas em seu código-fonte…. também é um pesadelo de manutenção.
Dito isso, se o senhor quiser experimentar adicionar seus próprios aliases de palavras-chave, modificar o código-fonte do Babel é a melhor opção. Eu adoraria que houvesse uma maneira de escrever uma extensão para fazer isso. Um grande agradecimento ao senhor Logan Smyth por me ajudar a navegar na fonte Babel!
