@growcss/babel-preset v2.0.0
Babel preset
A babel preset for transforming your JavaScript for GrowCss.
Currently contains transforms for all stage 4 (ES2018) and stage 3 syntax. Additionally, stage 4 syntax that is excluded is as follows:
- generators: regenerator-runtime is too heavyweight for our use.
- lifted template literal restrictions: we do not use tagged template literals, nor implement custom DSLs, otherwise we would enable this.
fast-async is used to compile async function without generators.
Install
$ npm install --save-dev @growcss/babel-preset
Usage
Via .babelrc
(Recommended)
.babelrc
{
"presets": ["@growcss/babel-preset"]
}
Via CLI
$ babel script.js --presets @growcss/babel-preset
Via Node API
require('@babel/core').transform('code', {
presets: ['@growcss/babel-preset']
});
Targeting Environments
This module uses @babel/preset-env to target specific environments.
Please refer to @babel/preset-env#targets for a list of available options.
For a list of browsers please see browserlist.
You may override our default list of targets by providing your own targets
key.
List of our supported browsers
The following transpiles only for Node v6.
{
"presets": [["@growcss/babel-preset", {
"targets": {
"node": 6
}
}]]
}
If you wish, you can also inherit our default list of browsers and extend them.
module.exports = {
'presets': [[
'@growcss/babel-preset',
{
'targets': Object.assign(
{},
require(browserslist-config-growcss),
{
'chrome': 42,
'explorer': 8
}
),
}
]]
};
You may override our default debug option by providing your own debug
key.
{
"presets": [["@growcss/babel-preset", {
"debug": true
}]]
}
React Mode
This preset can be configured to support typescript
, using "typescript": true
in our preset.
{
"presets": [["@growcss/babel-preset", {
"typescript": true
}]]
}
React Mode
This preset can be configured to support react
, using "react": true
in our preset.
{
"presets": [["@growcss/babel-preset", {
"react": true
}]]
}
React Development Mode
When process.env.NODE_ENV
is 'development'
, the development
mode will be set for @babel/preset-react
.
You may override our default development option by providing your own boolean development
key.
{
"presets": [["@growcss/babel-preset", {
"react": true,
"development": false
}]]
}
React PropTypes removal
This preset can be configured to remove propTypes using babel-plugin-transform-react-remove-prop-types with the following default options:
To enable this transformation with the default options, set the removePropTypes
option to true
:
{
"presets": [["@growcss/babel-preset", {
"react": true,
"removePropTypes": true
}]]
}
The default options that will be used are:
{
mode: 'wrap',
ignoreFilenames: ['node_modules'],
}
Default options can be overridden using the removePropTypes
option. These options will be shallow-merged with the defaults:
{
"presets": [["@growcss/babel-preset", {
"removePropTypes": {
"mode": "remove"
}
}]]
}
For example, if you are using this plugin in a deployable app, you might want to use the remove mode for your production build (and disable this transform entirely in development for optimal build speeds).
Selective loose modes
By default, this preset will compile everything in normal mode. This is safer, but comes with bundle size and runtime overhead. We have some options to selectively opt in to loose mode for some features. These options are:
- classes:
looseClasses
- computed properties:
looseComputedProperties
- parameters:
looseParameters
- template literals:
looseTemplateLiterals
Example:
{
"presets": [["@growcss/babel-preset", {
"looseClasses": true,
"looseComputedProperties": true,
"looseParameters": true,
"looseTemplateLiterals": true
}]]
}