This repository was archived by the owner on Jan 20, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 100
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #281 from pklepa/traducao-babel-plugin-macros.md
New translation: /docs/babel-plugin-macros.md
- Loading branch information
Showing
1 changed file
with
15 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,48 +1,47 @@ | ||
--- | ||
title: Using Babel Plugin Macros | ||
title: Utilizando Macros do Plugin Babel | ||
--- | ||
|
||
Gatsby includes a powerful new way of applying compile-time code transformations, [Babel macros](https://github.com/kentcdodds/babel-plugin-macros)! Macros are like Babel plugins, but instead of adding them to your `.babelrc`, you import them in the file you want to use them. This has two big advantages: | ||
Gatsby inclui uma nova e poderosa forma de aplicar transformações em seu código durante o compilamento, [os macros para o Babel](https://github.com/kentcdodds/babel-plugin-macros)! Macros são como plugins para o Babel, mas ao invés de adicioná-los ao seu `.babelrc`, você os importa dentro do próprio arquivo onde serão utilizados. Isso tem duas grandes vantagens: | ||
|
||
- No confusion about where a non-standard syntax is coming from. Macros are explicitly imported wherever they are used. | ||
- No configuration files. Macros are included directly in your code as needed. | ||
- Sem confusão quanto a origem de uma sintaxe fora do padrão. Os macros são explicitamente importados onde quer que sejam usados. | ||
- Sem arquivos de configuração. Os marcos são incluídos diretamente em seu código quando necessários. | ||
|
||
Like Babel plugins, macros run only at compile time. They are not included in the public JavaScript bundle. As such, macros have no effect on your code beyond the transformations they apply. | ||
Tal como os plugins para o Babel, os macros são executados somente no momento de compilamento. Eles não são incluídos em seu bundle público de JavaScript. Dessa forma, os macros não tem nenhum outro efeito em seu código além das transformações que aplicam. | ||
|
||
## Installing macros | ||
## Instalando macros | ||
|
||
Just like plugins, many macros are published as npm packages. By convention, they are named by their function, followed by `.macro`. | ||
Assim como plugins, muitos macros são publicados como pacotes npm. Por convenção, são nomeados por sua função, seguida de `.macro`. | ||
|
||
For example, [`preval.macro`](https://www.npmjs.com/package/preval.macro) is a macro that pre-evaluates JavaScript code. You can install it by running: | ||
Por exemplo, [`preval.macro`](https://www.npmjs.com/package/preval.macro) é um macro que pré-avalia o código JavaScript. Você pode instalá-lo usando: | ||
|
||
```shell | ||
npm install --save-dev preval.macro | ||
``` | ||
|
||
Some macros are instead included in larger packages. To install and use them, refer to their documentation. | ||
Há ainda alguns outros macros que são incluídos em pacotes maiores. Para instalação e uso destes, veja a documentação específica de cada um. | ||
|
||
## Using macros | ||
## Utilizando macros | ||
|
||
To use an installed macro, import it in your code like so: | ||
Para usar um macro instalado, você deve importá-lo em seu código: | ||
|
||
```javascript | ||
import preval from "preval.macro" | ||
``` | ||
|
||
You can then use the imported variable however the macro's documentation says. | ||
`preval.macro` is used as a template literal tag: | ||
Você pode então utilizar a variável importada da forma em que sua documentação a descreve. `preval.macro`, por exemplo, é usado como um identificador template literal: | ||
|
||
```javascript | ||
import preval from "preval.macro" | ||
const x = preval`module.exports = 1` // highlight-line | ||
``` | ||
|
||
When building your project this code will be transformed into: | ||
Quando compilado, esse código será transformado em: | ||
|
||
```javascript | ||
const x = 1 | ||
``` | ||
|
||
## Discovering available macros | ||
## Descobrindo macros disponíveis | ||
|
||
Take a look at the [Awesome babel macros](https://github.com/jgierer12/awesome-babel-macros) list to find available macros you can use. Additionally, this list contains helpful resources for using macros and developing them yourself. | ||
Dê uma olhada na lista [Awesome babel macros](https://github.com/jgierer12/awesome-babel-macros) para encontrar macros disponíveis para uso. Além disso, essa lista conta com recursos úteis de como fazer bom uso dos macros e mesmo para desenvolver um você mesmo. |