7.0.3-0 • Published 4 years ago

@mapbox/babel-preset-mapbox v7.0.3-0

Weekly downloads
713
License
BSD 2-Clause
Repository
github
Last release
4 years ago

@mapbox/babel-preset-mapbox

A configurable Babel preset which abstracts away the most common Babel plugins and presets needed to build a modern web application.

Usage

This package works with Babel 7 and above. Install @mapbox/babel-preset-mapbox by running the following command at the root of your project:

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

Then create a babel.config.js at the root of your project:

module.exports = {
  "presets": ["@mapbox/babel-preset-mapbox"]
}

Configuration

@mapbox/babel-preset-mapbox is a simple wrapper around a bunch of Babel presets and plugins. You can customize each of the babel preset/plugin, by passing an object with keys and values representing the name and configuration of preset/plugin respectively. In the example below, we are customizing the defaults of @babel/preset-react:

// babel.config.js
module.export = {
  presets: [
    '@mapbox/babel-preset-mapbox',
    {
      '@babel/preset-react': {
        pragma: 'dom'
      }
    }
  ]
};

Note: This option does a shallow merge with already existing properties in @mapbox/babel-preset-mapbox. If you want a more fine tuned control look at Advanced Configuration

Which Babel preset and plugin does it use?

Modifying browser support with the help of browserslist

You can customize the amount of compilation done by giving a list of browsers you want to support. We use browserslist to parse this information, so you can use any valid query format supported by browserslist.

@mapbox/babel-preset-mapbox allows you to customize browserslist by using any of the methods mentioned here.

An example of setting the environment variable BROWSERSLIST:

export BROWSERSLIST=">0.25%, not ie 11"
npx babel script.js

You can also set the BROWSERSLIST environment variable in your node application before parsing code with Babel

const babel = require('@babel/core');
const fs = require('fs');

process.env.BROWSERSLIST = '>0.25%, not ie 11';

const srcCode = fs.readFileSync('./src/index.js', 'utf8');

const output = babel.transform(srcCode, {
  presets: [require('@mapbox/babel-preset-mapbox')],
  filename: 'index.js'
}).code;

console.log(output);

Advanced configuration

You can pass a callback to the override option to fully customize this preset:

// babel.config.js
module.exports = {
  presets: [
    [
      '@mapbox/babel-preset-mapbox',
      {
        override({ name, options }) {
          if (name === 'babel-plugin-transform-react-remove-prop-types') {
            // returning null removes plugin/preset.
            return null;
          }

          if (name === '@babel/preset-react') {
            // Completely change the option.
            return {
              pragma: 'h'
            };
          }

          if (name === '@babel/preset-env') {
            // Override a particular option
            return Object.assign({}, options, { debug: true });
          }

          // Do not override options for other plugins/presets
          return options;
        }
      }
    ]
  ]
};