@best-shot/preset-babel

A best-shot preset for babel compiler.

This preset uses babel-preset-evergreen by default. It can transform:

• ECMAScript 2023: *.js
• Node.js: *.mjs / *.cjs
• Typescript: *.ts / *.mts / *.cts

Installation

npm install @best-shot/preset-babel --save-dev

Usage

// example: .best-shot/config.mjs
export default {
  presets: ['babel'],
  babel: {
    polyfill: 'global'
  }
};

Options

targets

Can't be specify directly, always using browserslist.loadConfig() || browserslist.defaults.

babel.polyfill

• type: [ false, 'global', 'pure' ]
• default: false

How babel handles polyfills. pure is an experimental option.

References: https://github.com/babel/babel/issues/10008

babel.env

• enum: [ 'auto', 'always' ]
• default: 'auto'

When 'always', babel-preset-evergreen will enabled in watch mode

Tips

You might need to pin core-js@3 when your project dependency tree has core-js@2:

npm install core-js@3

JSX support

• Use @best-shot/preset-react to support react jsx syntax.
• @best-shot/preset-vue is not support jsx yet.

Create custom babel configuration

References: https://babeljs.io/docs/en/configuration

// example: babel.config.json
{
  "plugins": ["lodash", "macros"]
}

Related

• @babel/preset-typescript
• @best-shot/preset-react
• @best-shot/core