@10up/babel-preset-default
Version:
10up's default babel preset
86 lines (64 loc) • 2.85 kB
Markdown
# 10up babel preset
Babel preset for transforming JavaScript at 10up.
[](#support-level)
## Installation
```sh
npm install --save-dev @10up/babel-preset-default
```
## Usage
Simply add `@10up/babel-preset-default` to your `.babelrc` file
```json
// .babelrc
{
"presets": [ "@10up/babel-preset-default"]
}
```
### Options
This babel preset exposes a few options. The default options are listed below.
```json
// .babelrc
{
"presets": [
["@10up/babel-preset-default", {
"modules": "auto",
// defaults to true if modules is false and false otherwise.
"runtimeESModules": false,
"wordpress": false,
"debug": false,
"removePropTypes": {},
"targets": [
"> 1%",
"ie >= 11",
"last 2 versions",
"Firefox ESR"
]
}]
]
}
```
#### options.modules
It's the `/preset-env` [modules](https://babeljs.io/docs/en/babel-preset-env#modules) setting. Default's to `auto` which will detect whether the "caller" (e.g webpack) has ES6 modules support and if so, will disable module transpilation (this is the desired behavior for tree-shaking for example);
#### options.wordpress
When enabled will load `/babel-preset-default`. Required when building WordPress Gutenberg blocks.
#### options.debug
Enables debug messages. Useful to review which presets and plugins babel is using.
#### options.removePropTypes
By default this babel preset will remove any prop-types declarations when building for production.
You rarely will need to change this setting, but in case you do, this option let's you specify any of the [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) options.
#### options.targets
Let's you specify which browser's are support. Set this option to `{}` if you want to leverage browserlist config sources (`.browserslistrc`). By default, the following browsers will be supported.
```json
[
"> 1%",
"ie >= 11",
"last 2 versions",
"Firefox ESR"
]
```
The appropriate `core-js` polyfills will be added automatically for those browsers.
### options.development
You can set this flag to enable or disable development mode, however, this preset will automatically detect that based on how it was loaded by the caller (e.g webpack).
## Support Level
**Active:** 10up is actively working on this, and we expect to continue work for the foreseeable future. Bug reports, feature requests, questions, and pull requests are welcome.
## Like what you see?
<a href="http://10up.com/contact/"><img src="https://10up.com/uploads/2016/10/10up-Github-Banner.png" width="850"></a>