@autoguru/babel-preset

AutoGuru's org-wide Babel preset

Usage no npm install needed!

<script type="module">
  import autoguruBabelPreset from 'https://cdn.skypack.dev/@autoguru/babel-preset';
</script>

README

@autoguru/babel-preset

AutoGuru's org-wide Babel set of presets and plugins.

Usage

yarn add --dev @autoguru/babel-preset \
    @babel/core

Then, in your babel.config.js, or .babelrc file:

module.exports = {
    presets: [
        '@autoguru/babel-preset/web', // for browser based targets
        '@autoguru/babel-preset/react', // additional presets for web based react projects
    ],
};

Presets

  • @autoguru/babel-preset is merely an alias of @autoguru/babel-preset/web.

  • @autoguru/babel-preset/node is for node based targets.

    • version (default: current) - the version of node you're targeting
    • modules (default: commonjs) - what module transformations to apply.
    • debug (default: isProduction) - a boolean indicating if you want debug information from @babel/preset-env.
    • corejs (default: 3) - The version of core-js to use.

  • @autoguru/babel-preset/web is used for browser based targets, which adds typical transformations needed to support esnext features on older browsers. This will look for a browserslist config file up the tree.

    • modules (default: false) - if you require module transformations. False is default as we use webpack's bundling system and want naked esmodules.
    • debug (default: isProduction) - a boolean indicating if you want debug information from @babel/preset-env.
    • corejs (default: 3) - The version of core-js to use.

  • @autoguru/babel-preset/react is for React based projects, including transformations for JSX. Also hoists FunctionComponents to the root, where it can. See @babel/plugin-transform-react-constant-elements . You can use this alongside @autoguru/babel-preset/web.