Babel personal notes

The Lord said, “If as one people speaking the same language they have begun to do this, then nothing they plan to do will be impossible for them. Come, let us go down and confuse their language so they will not understand each other.”

Basic packages

@babel/core: It has the main functionality.
@babel/cli: Babel built-in CLI which can be used to compile files from the command line.
@babel/preset-env: Default settings for Babel

To use with React.js

@babel/preset-react

This preset always includes the following plugins, so it works with .jsx files:

• @babel/plugin-syntax-jsx
• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-display-name

To use with Typescript:

@babel/preset-typescript

Others

@babel/runtime: So Babel can re-use output of a polyfill when applying other polyfill. It's a matter of efficiency. Doesn't impact the way you write the code.

Babel configuration

There is two files that you can use for config, depending what is your use case:

• babel.config.json: In case that you want to apply Babel to the whole project and compile node_modules.
• babelrc.json: If you only want to apply Babel to a single part of your project.

**They must be in the root of the project -where the package.json is- otherwise you have to do more configuration.

Structure of a babel.config.js -example-

module.exports = function (api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')
  if (!validEnv.includes(currentEnv)) {
    throw new Error('Please specify a valid `NODE_ENV` or ' + '`BABEL_ENV` environment variables. Valid values are "development", ' + '"test", and "production". Instead, received: ' + JSON.stringify(currentEnv) + '.'
  )
  }
  return {
    presets: [ isTestEnv && [
      '@babel/preset-env', {
        targets: {
          node: 'current'
        },
        modules: 'commonjs'
      },
      '@babel/preset-react'
    ],
    (
    isProductionEnv || isDevelopmentEnv) && [
    '@babel/preset-env',
    {
      forceAllTransforms: true,
      useBuiltIns: 'entry',
      corejs: 3,
      modules: false,
      exclude: ['transform-typeof-symbol']
    }
    ],
    [
      '@babel/preset-react',
      {
        development: isDevelopmentEnv || isTestEnv,
        useBuiltIns: true
      }
    ],
    [
      '@babel/preset-typescript',
      {
        development: isDevelopmentEnv || isTestEnv,
        useBuiltIns: true
      }
    ]
  ].filter(Boolean),
  plugins: [
    'babel-plugin-macros',
    '@babel/plugin-syntax-dynamic-import',
    isTestEnv && 'babel-plugin-dynamic-import-node',
    '@babel/plugin-transform-destructuring',
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true
      }
    ],
    [
      '@babel/plugin-proposal-object-rest-spread',
      {
        useBuiltIns: true
      }
    ],
    [
      '@babel/plugin-transform-runtime',
      {
        helpers: false,
        regenerator: true,
        corejs: false
      }
    ],
    [
      '@babel/plugin-transform-regenerator',
      {
        async: false
      }
    ],
    isProductionEnv && [
      'babel-plugin-transform-react-remove-prop-types',
      {
        removeImport: true
      }
    ]
  ].filter(Boolean)
 }
}

Plugins and Presets

Plugins are what carry Babel functionality.
Presets are collections of plugins with a related purpose. Presets have some extra configuration that you can set.

*For node.js, when requesting (or importing if it uses ES Modules), use:

require('@babel/register')({
  extensions: ['.js', '.tsx'],
  presets: ['@babel/preset-typescript'],
})