@4c/babel-preset

@4c/babel-preset

A configurable, batteries included, babel preset for libraries and web apps.

Includes the following presets and plugins:

• preset-env
• preset-react
• react-intl
• class-properties
• dev-expression
• export-extensions
• optional-chaining

Install

yarn add @4c/babel-preset -D

Configure

Without options:

{
  "presets": ["@4c"]
}

With options;

{
  "presets": [
    [
      "@4c",
      {
        "target": "web-app",
        "modules": false,
        "intl": { "prefix" "@mylib" },
      }
    ]
  ]
}

Options

In addition to the options below, all preset-env are accepted to be overridden when the defaults aren't sufficient. By default the preset picks a set of known safe combinations tailored to the chosen target. In additional production vs dev enviroments are set automatically depending on the value of the NODE_ENV environment variable or explict --env-name option passed to babel (not a preset option).

target

'web' | 'web-app' | 'node', defaults to 'web'

The overall build environment target. Used to set some smart presets as well as configure the preset-env targets.

node

• targets set to node 10 in production and current in development
• modules set to commonjs
• intl is disabled

web

• targets uses the browserlist config is (determined by .browserslistrc, etc) if available or defaults to ['ie >= 11', 'last 2 Edge versions', 'last 4 Chrome versions', 'last 4 Firefox versions', 'last 2 Safari versions'];

web-app

• uses the same targets as web
• defaults modules to false
• defaults runtime to true

modules

"commonjs' | false, defaults to false except when target is 'web-app' and 'commonjs' otherwise

The preset-env modules option. controls the output module format

runtime

Turns on the babel runtime transform.

intl

boolean | { prefix: string, messagesDir: string }

Configures the react-intl babel plugin to extract and output localized strings prefixed by the package name or provided prefix