babel-preset-web v0.0.1-alpha.1

babel-preset-web

Like @babel/preset-env, but for web standards.

Usage

Install:

npm i --save-dev babel-preset-web

In .babelrc:

{
  "presets": [
    [
      "babel-preset-web",
      {
        "targets": {
          "ie": "11",
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Any Polyfills you'd need are included as NPM dependencies -- you do not need to install them separately.

Why?

Many JavaScript projects use @babel/preset-env to (1) transpile ES2015 language features, and (2) add necessary polyfills for ECMAScript features based on a list of target browsers.

However, this misses web standards, such as fetch. For example: Although you might be targeting {"ie: "11"} in your @babel/preset-env, your app may throw runtime exceptions if a web standard is not available in any of your target browsers.

babel-preset-web seeks to solve this problem.

Browserslist Integration

By default babel-preset-web will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set.

Options

targets

string | { [string]: string }, defaults to {}.

This can either be a browserslist-compatible query:

{
  "targets": "> 0.25%, not dead"
}

Or an object of minimum environment versions to support:

{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

Example environments: chrome, opera, edge, firefox, safari, ie, android, ios.

debug

boolean, defaults to false.

Outputs the targets/plugins used and the version specified in plugin data version to console.log.

useBuiltIns

"usage" | false, defaults to false.

useBuiltIns: 'usage'

Adds specific imports for polyfills when they are used in each file. We take advantage of the fact that a bundler will load the same polyfill only once.

In

a.js

fetch('http://www.example.com')

b.js

new Intl.DateTimeFormat('en-US').format(new Date())

Out (if environment doesn't support it)

a.js

import 'whatwg-fetch';
fetch('http://www.example.com')

b.js

import 'intl';
new Intl.DateTimeFormat('en-US').format(new Date())

Out (if environment supports it)

a.js

fetch('http://www.example.com')

b.js

new Intl.DateTimeFormat('en-US').format(new Date())

useBuiltIns: false

Don't add polyfills automatically per file.

ignoreBrowserslistConfig

boolean, defaults to false

Toggles whether or not browserslist config sources are used, which includes searching for any browserslist files or referencing the browserslist key inside package.json. This is useful for projects that use a browserslist config for files that won't be compiled with Babel.

Included Polyfills

• whatwg-fetch
• intl

Need a new polyfill? Open an issue or pull request.