@anolilab/babel-preset v9.0.15
Babel preset
A babel preset for transforming your JavaScript for Anolilab.
It 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 @babel/core @babel/runtime @anolilab/babel-preset
yarn add -D @babel/core @babel/runtime @anolilab/babel-preset
pnpm add -D @babel/core @babel/runtime @anolilab/babel-preset
Usage
Via .babelrc
(Recommended)
.babelrc
{
"presets": ["@anolilab/babel-preset"]
}
Via CLI
$ babel script.js --presets @anolilab/babel-preset
Via Node API
require("@babel/core").transform("code", {
presets: ["@anolilab/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": [
[
"@anolilab/babel-preset",
{
"targets": {
"node": 6
}
}
]
]
}
If you wish, you can also inherit our default list of browsers and extend them.
const browserlist = require("browserslist-config-anolilab");
module.exports = {
presets: [
[
"@anolilab/babel-preset",
{
targets: browserlist['production'],
},
],
],
};
You may override our default debug option by providing your own debug
key.
{
"presets": [
[
"@anolilab/babel-preset",
{
"debug": true
}
]
]
}
Typescript Mode
To use this preset please install
npm install --save-dev @babel/preset-typescript @babel/plugin-syntax-jsx
This preset can be configured to support typescript
, using "typescript": true
in our preset.
{
"presets": [
[
"@anolilab/babel-preset",
{
"typescript": true
}
]
]
}
React Mode
To use this preset please install
npm install --save-dev @babel/preset-react
This preset can be configured to support react
, using "react": true
or "react": {...}
in our preset.
{
"presets": [
[
"@anolilab/babel-preset",
{
"react": true
}
]
]
}
Or
{
"presets": [
[
"@anolilab/babel-preset",
{
"react": {
"pragma": "dom", // default pragma is React.createElement (only in classic runtime)
"pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
"throwIfNamespace": false, // defaults to true
"runtime": "classic" // defaults to classic
// "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
}
}
]
]
}
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": [
[
"@anolilab/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": [
[
"@anolilab/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": [
[
"@anolilab/babel-preset",
{
"removePropTypes": {
"mode": "remove"
}
}
]
]
}
For example, if you are using this plugin in a deployable app, you 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 lose mode. We have options to selectively opt out to loose mode for features. These options are:
- env
loose
- classes:
looseClasses
- computed properties:
looseComputedProperties
- parameters:
looseParameters
- template literals:
looseTemplateLiterals
- object rest spread:
looseObjectRestSpread
Example:
{
"presets": [
[
"@anolilab/babel-preset",
{
"loose": false,
"looseClasses": false,
"looseComputedProperties": false,
"looseParameters": false,
"looseTemplateLiterals": false,
"looseObjectRestSpread": false
}
]
]
}
The risks of enabling loose classes are outlined in the Babel docs.
Specifying module transforms
You can use the modules
option to enable transformation of modules given to this preset:
{
"presets": [
[
"@anolilab/babel-preset",
{
"modules": "auto"
}
]
]
}
Both true
and the option default auto
will not transform modules if ES6 module syntax is already supported by the environment, or "commonjs"
otherwise. false
will not transform modules.
Specifying use of core-js v3
You can use the corejs
option to enable the use of the core-js v3 polyfills:
{
"presets": [
[
"@anolilab/babel-preset",
{
"corejs": {
"version": 3
}
}
]
]
}
Optimizations
babel-plugin-annotate-pure-calls
: Injects for#__PURE
annotations to enable tree-shakingbabel-plugin-dev-expressions
: A mirror of Facebook’s dev-expression Babel plugin. It reduces or eliminates development checks from production code
Development-only Expressions + Treeshaking
babel-plugin-annotate-pure-calls
+ babel-plugin-dev-expressions
work together to fully eliminate dead code (aka treeshake) development checks from your production code. Let’s look at an example to see how it works.
Supported Node.js Versions
Libraries in this ecosystem make the best effort to track Node.js’ release schedule. Here’s a post on why we think this is important.
Contributing
If you would like to help take a look at the list of issues and check our Contributing guild.
Note: please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Credits
License
The anolilab javascript-style-guide is open-sourced software licensed under the MIT license
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago