babel-preset-kyt-core

babel-preset-kyt-core

A wrapper around @babel/preset-env with sane defaults.

Installation

$ yarn add --dev babel-preset-kyt-core
$ npm i --save-dev --save-exact babel-preset-kyt-core

Options

• includeRuntime (Boolean) option to true to automatically load @babel/plugin-transform-runtime (RECOMMENDED!).

module.exports = {
  presets: [
    [
      'babel-preset-kyt-core',
      {
        includeRuntime: true,
      },
    ],
  ],
};

When using this option, your application will need to install @babel/runtime:

$ yarn add @babel/runtime
$ npm i --save-exact @babel/runtime

• envOptions (Object)

When used with kyt, using this preset allows you to specify different configuration values for client and server. By declaring envOptions, you can set options that are passed to @babel/preset-env:

module.exports = {
  presets: [
    [
      'babel-preset-kyt-core',
      {
        // these are the default values for `targets`
        envOptions: {
          client: {
            targets: {
              browsers: ['>1%', 'last 4 versions', 'not ie < 11'],
            },
          },
          server: {
            targets: {
              node: 'current',
            },
          },
        },
      },
    ],
  ],
};

Without kyt, only the values set for client will be used.

To support multi-configuration (client / server) when not using kyt, set KYT_ENV_TYPE before running Babel compilation.

KYT_ENV_TYPE (supported values):

• client
• server
• test

Example:

// using `@babel/cli`
KYT_ENV_TYPE=server babel src -d lib

// using `webpack`
KYT_ENV_TYPE=server webpack --config webpack.server.config.js

These are sensible defaults that work well with kyt out of the box. The client option, typically reserved for client builds in kyt, is used to target browsers. The server option targets the current version of node.

The client.targets.browsers configuration is in the browserslist format.

Polyfilling

This preset has core-js@3* as a dependency, but to add polyfills to Webpack entrypoints, you need to include any relevant polyfills while building your project.

The convention in kyt is add them to src/client/polyfills.js:

// src/client/polyfills.js
import 'core-js/stable';
import 'regenerator-runtime/runtime';

In your Webpack configuration:

// webpack.client.config.js
module.exports = {
  target: 'web',
  entry: {
    main: ['/path/to/src/client/polyfills.js', '/path/to/src/client/index.js'],
  },
};