@tangoca/babel-preset

Babel Preset

A babel preset for transforming your JavaScript at Tango. This preset extends the Airbnb preset for use in the Tango environment by adding support for class properties and dynamic import.

Airbnb

Currently contains transforms for all stage 4 (ES2018) and stage 3 syntax that is permitted in the Airbnb Style Guide. Please note that if usage of a stage 3 proposal is not explicitly mentioned in the Airbnb Style Guide, then it will not be enabled here. Additionally, stage 4 syntax that is excluded is as follows:

• generators: regenerator-runtime is too heavyweight for our use.
• async/await: regenerator-runtime is too heavyweight for our use, and async-to-promises is not yet complete enough to be safely used.
• async iterators: depends on both generators and async functions
• lifted template literal restrictions: we do not use tagged template literals, nor implement custom DSLs, otherwise we would enable this.

Installation

This package is a private scoped package under the tangoca org. Before you install make sure you have a npm user and have been given permission to access private packages on the Tango org.

npm install --save-dev @tangoca/babel-preset

Usage

The recommended usage for this package is through a .babelrc file but it can also be used via the commandline.

{
  "presets": ["@tangoca/babel-preset"]
}

$ babel script.js --presets @tangoca/babel-preset

Options

This preset supports environment targeting (using @babel/preset-env) and testing environments. These options can be passed into the preset using the array syntax.

Targets

You can choose to pass in an explicit set of targets or add to the default targets set by the Airbnb base preset configuraiton.

{
  "presets": [["@tangoca/babel-preset", {
    "targets": {
      "chrome": 50,
      "explorer": 11,
      "firefox": 45
    }
  }]]
}

{
  "presets": [["@tangoca/babel-preset", {
    "additionalTargets": {
      "chrome": 50
    }
  }]]
}

Testing Environment

If you're using babel in a testing environment, you can pass the test flag to the options object and the preset will automatically configure a testing environment by adding the babel-plugin-css-modules-transform and babel-plugin-dynamic-import-node plugins.

{
  "presets": [["@tangoca/babel-preset", {
    "includeTestEnv": true
  }]]
}